Question

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

这是我尝试过的：

.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);   
    })

该代码中正在发生，但是它非常慢，并且鼠标悬停时不会显示“日期”和“关闭”。

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

Answer 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就会知道您创建的此工具提示var，可以在svg之后立即创建此var。

最后一部分将将此工具提示与d3元素上的2个事件相关联：mouseover＆mouseout：

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

希望这会有所帮助

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

1 个答案: