Question

我希望将鼠标悬停在圆圈上时显示工具提示。如果注释掉我附加的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;

Answer 1

在调试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>

工具提示未显示

1 个答案: