D3.js: 如何在svg上移动鼠标时创建弹出事件？

Question

各位。我有一个问题，关于如何 return data.value 与 "mouse" 事件。下面的代码可以获得当前的 X 位置（显示在上），而我不知道如何 return obj.value.

我已经检查了 drought-crops 中使用的方法，但仍然坚持使用它。

任何人都可以给我一些想法吗？我猜你们中有些人遇到过这样的场景。

灵感来自 Zoomable Area and Zoomable Map Tiles created by mbostock. (Add the following code into Zoomable Area 调试）

<style>
.info {
  position: absolute;
  top: 100px;
  left: 50px;
}
</style>
<script>     
svg.append("rect")
    .attr("class", "pane")
    .attr("width", width)
    .attr("height", height)
    .call(zoom)
    .on("mousemove", mousemoved);

var info = svg.append("text").attr("class","info");
function mousemoved() {
//work with the x position returned, but no idea how to return the d.value
  info.text(d3.mouse(this));
}
</script>

Answer 1

就像在任何其他处理程序函数中一样访问绑定数据：

function mousemoved(d,i) {
    // do something with d and i
}

Answer 2

http://bl.ocks.org/mbostock/3902569

 function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    ...
  }

这是 Mike 的示例提供的代码。

首先你得到你在鼠标位置上使用的刻度的x-value。然后 bisector 用于获取基础数据的两个最接近的值。然后你 select 合适的就可以显示了。

如果需要，您可以在两个数据点之间手动插值或使用路径元素的 getPointAtLength 并计算路径使用的插值。

D3.js: 如何在svg上移动鼠标时创建弹出事件？

D3.js: How to create the pop-up event when moving mouse on the svg?

javascript

svg

d3.js