D3jS显示悬停在圆圈上的信息

【问题标题】：D3jS show info on hover over circleD3jS显示悬停在圆圈上的信息
【发布时间】：2018-12-11 02:50:25
【问题描述】：

我有一个折线图，它在每个数据点的线上添加圆圈。悬停时，我想显示数据点的“日期”和“关闭”。

这是我尝试过的：

.on("mouseover", function(d) {      
        svg.transition()        
            .duration(100)      
            .style("opacity", 1);       
        svg .html(d.date + "<br/>"  + d.close)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        svg.transition()        
            .duration(100)      
            .style("opacity", 1);   
    })

代码发生了一些事情，但是速度很慢，并且鼠标悬停时不显示“日期”和“关闭”。

如何让鼠标悬停在每个数据点圆圈上时显示/隐藏“日期”和“关闭”？

【问题讨论】：

svg 是您的 SVG 选择。您可能想为工具提示创建一个<div>，因此请使用适当的选择。

标签： javascript d3.js svg mouseover

【解决方案1】：

我认为最好的方法是在您的解决方案中包含 d3.tip。我使用 d3.tip.v0.6.3.js。

您首先要做的是在 var 中创建工具提示视图：

var toolTip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
        return "<div style='margin-bottom: -12px; color:"+d.data.color+"'>"+d.name+"</div></br><div style='margin-bottom: -5px'>"+ d.data.label+"</div></br>";
    });

'.html' 后面的 'function(d)' 返回工具提示的 html 片段，只是不要忘记引号。

您应该在该函数之后添加：

svg.call(toolTip);

这样你的 svg 就会知道你创建的这个 tooltip var，你可以在你 svg 之后立即创建这个 var。

最后一部分是将此工具提示连接到 d3 元素上的 2 个事件：mouseover&mouseout：

.on("mouseover", toolTip.show )
.on("mouseout", toolTip.hide);

希望对你有帮助

【讨论】：