Question

我正在试图在图表上显示d3鼠标悬停功能，以显示时间戳和agv里程的文本值，但是圆圈保持在y轴顶部，当鼠标箭头指向内部和外部时，图形将消失图表区域。

The code and output of the mouseover function are presented here Plunker

任何人都可以指导我吗？非常感谢您的帮助。提前谢谢。

Answer 1

您必须定义bisectDate函数并设置圆的cx和cy属性以使其移动。

var bisectDate = d3.bisector(function(d) { return d.Timestamp; }).right;
function mousemove() {  


    var x0 = x.invert(d3.mouse(focus.node())[0]),              
        i = bisectDate(dataset, x0, 1),                   
        d0 = dataset[i - 1],                              
        d1 = dataset[i];

        var d = x0 - d0.Timestamp > d1.Timestamp - x0 ? d1 : d0;     

    focus.selectAll("circle.y")
        .attr("cx", x(d.Timestamp))
        .attr("cy", y(d.AGV_Mileage))


}

编辑了您的Plunker

D3线图鼠标悬停问题

1 个答案: