大家。我有一个关于如何使用"鼠标"返回data.value的问题。事件。以下代码可以获取当前的X-Position(显示在上面),而我不知道如何返回 obj.value 。
我已经检查了drought-crops使用的方法,但仍然坚持使用。
有人可以给我一些想法吗?我想你们中的一些人遇到了这种情况。
受到Zoomable Area创建的Zoomable Map Tiles和mbostock的启发。 (将以下代码添加到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>
答案 0 :(得分:1)
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;
...
}
这是迈克的一个例子提供的代码。
首先,您获得鼠标位置所使用的比例x-value
。然后使用bisector获取基础数据的两个最接近的值。然后选择合适的一个并显示它。
如果需要,可以在两个数据点之间手动插值,或使用getPointAtLength
路径元素并计算路径使用的插值。
答案 1 :(得分:0)
只需访问绑定数据,就像在任何其他处理函数中一样:
function mousemoved(d,i) {
// do something with d and i
}