D3.js：如何在svg上移动鼠标时创建弹出事件？ [英] D3.js: How to create the pop-up event when moving mouse on the svg?

问题描述

大家。我有一个问题关于如何返回data.value与鼠标事件。以下代码可以获取当前的X位置（显示在），而我不知道如何返回 obj.value 。

everyone. I've got one question about how to return the data.value with the "mouse" event. The following code can get the current X-Position(show on the ), while I've no idea how to return the obj.value.

我查看了干旱作物所使用的方法，但仍然坚持。

I've checked the method used at drought-crops, but still stuck on it.

任何人都可以给我一些想法吗？

Can anyone give me some ideas about it? I guess some of you have met such kind of scenario.

启发自可缩放区域和可缩放地图图块，由 mbostock 。 （将以下代码添加到可缩放区域中进行调试）

Inspired from Zoomable Area and Zoomable Map Tiles created by mbostock. (Add the following code into Zoomable Area to debug)

<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>

推荐答案

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的示例提供的代码。

This is code provided by an example from Mike.

首先，你得到你在鼠标位置上使用的比例的 x-value 。然后使用平分线获取基础数据的两个最接近的值。

First you get the x-value of the scale you are using on the position of the mouse. Then a bisector is used to get the two closest values of your underlying data. You then select the appropriate one and can display it.

如果需要，您可以在两个数据点之间手动内插，也可以使用 getPointAtLength of path-elements并计算路径使用的内插值。

If you want you can interpolate either manually between your two data points or use the getPointAtLength of path-elements and calculate the interpolated value used by the path.

这篇关于D3.js：如何在svg上移动鼠标时创建弹出事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！