工具提示未显示

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（具有大小的那个）存在，并且圆圈被添加到那个而不是新的。

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>