javascript - D3：为什么光标附近的工具提示从不显示？

Question

我正在尝试制作一个 d3 工具提示，当我将鼠标悬停在一个点上时，它可以显示在我的光标附近。我尝试了很多在线可用的方法，但没有一个有效。工具提示不显示，并且控制台中没有错误消息。谁能帮我解决这个问题？我的代码如下：

我怀疑 svg 可能存在一些问题，但不知道如何解决。

var svg = d3.select("#linechart").append("svg").attr('id','cases')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var xScale = d3.scaleTime()
    .domain(d3.extent(getCovidDate(data,state), function(d){return new Date(d)}))
    .range([0, width]);


var yScale = d3.scaleLinear()
    .domain(d3.extent(getCases(data,state), function(d){return d}))
    .range([height, 0]);


var line = d3.line()
    .x(function(d) { return xScale(new Date(d[0])); }) // set the x values for the line generator
    .y(function(d) { return yScale(d[1]); }) // set the y values for the line generator
    .curve(d3.curveMonotoneX) // apply smoothing to the line

var dataset = d3.zip(getCovidDate(data,state),getCases(data,state))


svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom


svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

var div = d3.select("#cases").append("div")
    .attr("class", "tooltip")
    .style("display", "none");


svg.append("path")
    .datum(dataset) // Binds data to the line
    .attr("class", "line") // Assign a class for styling
    .attr("d", line)  // Calls the line generator
    .style('fill-opacity', 0)
    .style('stroke','cadetblue')
    .on('mouseover', function (d, i) {
        d3.select(this).transition()
            .duration('50')
            .attr('opacity', '.55')})
    .on('mouseout', function (d, i) {
        d3.select(this).transition()
            .duration('50')
            .attr('opacity', '1')});

svg.selectAll(".dot")
    .data(dataset)
    .enter().append("circle") 
    .attr("class", "dot") // Assign a class for styling
    .attr("cx", function(d) { return xScale(new Date(d[0])) })
    .attr("cy", function(d) { return yScale(d[1]) })
    .attr("r", 5)
    .style("fill",'cadetblue')
    .on('mouseover', function (d, i) {
        d3.select(this).transition()
            .duration('50')
            .attr('opacity', '.55')
        
        div.style("display", "inline");
    })
    .on('mousemove',function(d){
        div.text(d[1])
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 15) + "px")
    })
    .on('mouseout', function (d, i) {
            d3.select(this).transition()
                .duration('50')
                .attr('opacity', '1')
            div.style("display", "none");
            
    });

svg.append("line")
    .attr("x1", xScale(new Date(inputValue)))
    .attr("y1", 0)
    .attr("x2", xScale(new Date(inputValue)))
    .attr("y2", height)
    .style("stroke-width", 2)
    .style("stroke", "red")
    .style("fill", "none");

    d3.select('#cases').remove()

标签： javascriptd3.js