工具提示未显示

Q-man 发表于 Dev

侠客

我希望将鼠标悬停在圆圈上时显示工具提示。如果注释掉我附加的svg元素以设置容器的宽度和高度，则会出现工具提示。我在这里做错了什么？我完全遇到了障碍。下面是当我不添加svg以及何时添加设置容器大小的svg的图像

import React, {Component, useRef, useEffect} from 'react';
import * as d3 from "d3";
//import {withFauxDOM} from 'react-faux-dom';
//import ReactFauxDOM from 'react-faux-dom'
import Faux from "react-faux-dom"
import { select } from 'd3-selection'
import { createNoSubstitutionTemplateLiteral } from 'typescript';
import { extent, max, min } from "d3-array";


class Linechart extends Component {
  constructor(props){
    super(props)
    this.createBarChart = this.createBarChart.bind(this)
  }
  
  componentDidMount() {
    this.createBarChart()
  }

  componentDidUpdate() {
    this.createBarChart()
  }

  createBarChart() {
    var margin = {top: 30, right: 30, bottom: 30, left: 60},
        width = 960 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    var node = this.node
    var divObj = select(node)
    //              .append("svg")
    //              .attr("width", width + margin.left + margin.right)
    //              .attr("height", height + margin.top + margin.bottom)
    //              .append("g")
    //              .attr("transform","translate(" + margin.left + "," + margin.top + ")");
      
    // Define the div for the tooltip
    const tooltip = divObj
        .append("div")  
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden")
        .text("I am a simple tooltip");
    
     divObj.append("svg:svg")
        .append("circle")
        .attr("stroke", "black")
        .attr("fill", "aliceblue")
        .attr("r", 50)
        .attr("cx", 52)
        .attr("cy", 52)
        .on("mouseover", function(){return tooltip.style("visibility", "visible");})
        .on("mousemove", function(){return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
        .on("mouseout", function(){return tooltip.style("visibility", "hidden");})
    }
    render() {
      return <div ref={node => this.node = node} className="example_div"> </div>
   }
}

export default Linechart;

鲁本·赫斯鲁特（Ruben Helsloot）

调试d3代码时，请始终查看DOM / Element检查器。在这种情况下，它告诉我您具有以下结构：

您附加一个div和和svg 内另一个svg。由于这是错误的，因此它不知道该怎么办，即使它想显示工具提示，也不能这样做-因为在SVG世界中，DIV是完全未知的。

我认为你做的意外压倒一切的错误divObj是一种svg代替div，让我改变了代码追加施胶svg，不覆盖divObj。

var margin = {
    top: 30,
    right: 30,
    bottom: 30,
    left: 60
  },
  width = 960 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

var divObj = d3.select(".example_div");
divObj
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Define the div for the tooltip
const tooltip = divObj
  .append("div")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden")
  .text("I am a simple tooltip");

divObj.append("svg:svg")
  .append("circle")
  .attr("stroke", "black")
  .attr("fill", "aliceblue")
  .attr("r", 50)
  .attr("cx", 52)
  .attr("cy", 52)
  .on("mouseover", function() {
    return tooltip.style("visibility", "visible");
  })
  .on("mousemove", function() {
    return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    return tooltip.style("visibility", "hidden");
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="example_div"></div>

现在，存在另一个问题，因为您有两个SVG而不是一个。我建议以下。我所做的只是确保仅存在一个SVG（带有调整大小的SVG），然后将圆圈添加到该SVG中，而不是添加到新的SVG中。

var margin = {
    top: 30,
    right: 30,
    bottom: 30,
    left: 60
  },
  width = 960 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

var divObj = d3.select(".example_div");
var svg = divObj
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Define the div for the tooltip
const tooltip = divObj
  .append("div")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden")
  .text("I am a simple tooltip");

svg
  .append("circle")
  .attr("stroke", "black")
  .attr("fill", "aliceblue")
  .attr("r", 50)
  .attr("cx", 52)
  .attr("cy", 52)
  .on("mouseover", function() {
    return tooltip.style("visibility", "visible");
  })
  .on("mousemove", function() {
    return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    return tooltip.style("visibility", "hidden");
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="example_div"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-25

我来说两句

0 条评论

登录后参与评论

工具提示引导未显示

SSRS工具提示未显示

JButton动态工具提示文本未显示

工具提示未显示相关数据

辅助图未显示工具提示

工具提示未显示在图表中

Chart.js工具提示未显示

Antd / Angular工具提示未显示

jQuery UI工具提示未显示

Material UI IconButton 工具提示未正确显示

Google条形图-工具提示未显示

带有Bootstrap工具提示的图像映射未正确显示

图表JS自定义工具提示未显示

ng-repeat中的div未显示AngularUI的工具提示

尽管有数据，但工具提示未显示

Javascript工具提示未显示在样式定义的框中

工具提示未显示在状态栏加载项中

alt和标题未显示为svg路径的工具提示

Google材料图表（散点图）未显示趋势线或工具提示

PrimeFaces Piechart：我的本地环境中未显示工具提示

工具提示未显示在高图图表上

d3工具提示未显示在传单地图顶部

左下角的Chrome URL工具提示未显示

d3js SVG：title工具提示未显示

Google图表：工具提示中的图表未显示

工具提示显示内容

仅当未显示弹出窗口时，才在悬停时显示传单工具提示

SearchView提示未显示

TOP 榜单

文章

工具提示未显示

工具提示未显示

Android Studio Kotlin：提取为常量

IE 11中的FormData未定义

计算数据帧R中的字符串频率

如何在R中转置数据

如何使用Redux-Toolkit重置Redux Store

Excel 2016图表将增长与4个参数进行比较

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

未捕获的SyntaxError：带有Ajax帖子的意外令牌u

OpenCv：改变 putText() 的位置

ActiveModelSerializer仅显示关联的ID

算术中的c ++常量类型转换

如何开始为Ubuntu开发

将加号/减号添加到jQuery菜单

去噪自动编码器和常规自动编码器有什么区别？

获取并汇总所有关联的数据

OpenGL纹理格式的颜色错误

在 React Native Expo 中使用 react-redux 更改另一个键的值

http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

TreeMap中的自定义排序

Redux动作正常，但减速器无效

如何对treeView的子节点进行排序