如何使用d3.js在mouseover svg线图上显示值的工具提示？

我正在使用D3.js.我想显示一个工具提示与相应的Y轴值，当我mouseover d3.svg.line（）。如何使用d3.js在mouseover svg线图上显示值的工具提示？

我尝试使用此代码：

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

但它抛出错误有没有方法 '追加'。有没有其他方法？

来源

2013-04-17 Prince

d3.svg.line（）是一个线条生成器;它不是实际的线元素。此功能可用于区域生成器，但您可以通过使用“填充：无”来禁用内部形状的外观。有关更多详细信息，请参阅其文档链接：https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line。

下面的代码使用d3.svg.line（）生成器创建一个路径元素，然后向其生成的路径添加工具提示。该标题的文本属性显示鼠标在哪里的y值。这是通过使用鼠标事件“mousemove”来完成的，该事件看起来更像你想要的，而不是使用“鼠标悬停”。（鼠标悬停需要你移入和移出形状来更新文本值，而鼠标移动会即使您的鼠标沿线的移动而改变的值。）

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

来源

2013-04-17 19:35:19 chrtan

这个代码仅给出两个参数X和Y，但我有我想要显示它的路径悬停一些数据阵列，怎能将任何可能的想法？ –

函数mMove可以接收“d”参数。这个“d”参数是您悬停的数据元素。 – zenw0lf

这是3.0前的代码。根据https://github.com/mbostock/d3/wiki/Upgrading-to-3.0#svg，应该使用d3.mouse（this）。 –

有在你的答案有点错误。

d3.svg.mouse(this)

不起作用。

正确答案是

d3.mouse(this)

来源

2014-05-20 16:34:40 theBell

这就对了:) – Bruce

如何使用d3.js在mouseover svg线图上显示值的工具提示？

回答

相关问题