svg - 当鼠标悬停在使用 d3.js 的 svg 折线图上时，如何显示带有值的工具提示？

Question

我正在使用 D3.js。我想当我将鼠标悬停在 d3.svg.line() 上时显示带有相应 Y 轴值的工具提示。

我尝试使用此代码:

d3.svg.line().append("title")
    .text(function(d) { return d; });`

但它抛出错误没有方法“append”。还有其他办法吗？

Answer 1

d3.svg.line() 是一个直线生成器；它不是实际的线元素。此函数旨在与区域生成器配合使用，但您可以使用“fill:none”禁用其中形状的外观。有关更多详细信息，请参阅其文档的链接:https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line .

下面的代码使用 d3.svg.line() 生成器创建一个路径元素，然后将工具提示添加到它生成的路径中。该标题的文本属性显示鼠标所在位置的 y 值。这是通过使用鼠标事件“mousemove”来完成的，这似乎更符合您的要求，而不是使用“mouseover”。 (鼠标悬停要求您移入和移出形状以更新文本值，而鼠标移动即使您的鼠标沿着线条移动也会更改该值。)

var data = [[{x:100, y:200}, {x:0,y:400}, {x:2, y:300}]];


var line = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("basis"); 

var svg = d3.select("body").append("svg:svg")
            .attr("width", 400)
            .attr("height", 400);

var g = svg.selectAll("g").data(data).enter().append("svg:g")
                          .attr("width", 400)
                          .attr("height", 400);

g.append("path")
    .attr("d", line)
    .attr("id", "myPath")
    .attr("stroke", "black")
    .attr("stroke-width", 5)
    .attr("fill", "none")    // Remove this part to color the 
                             // shape this path produces
    .on("mousemove", mMove)
    .append("title");

function mMove(){

     var m = d3.svg.mouse(this);
     d3.select("#myPath").select("title").text(m[1]);
}