1

我正在构建一个带有缩放、刷亮、复选框等的复杂多线图。我能够完成所有这些工作，但坚持让工具提示工作。我想得到这样的东西

http://bl.ocks.org/benjchristensen/2657838

在特定 x 坐标处具有所有路径值的线

var vertical = d3.select("#main-graph")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "380px")
.style("top", "10px")
.style("bottom", "30px")
.style("left", "0px")
.style("background", "#fff");

d3.select("#main-graph")
.on("mousemove", function(){
mousex = d3.mouse(this);
mousex = mousex[0] + 220 ;
vertical.style("left", mousex + "px" )})
.on("mouseover", function(){  
mousex = d3.mouse(this);
mousex = mousex[0] +220 ;
vertical.style("left", mousex + "px")});
});

目前我有上面的代码来获取这条线。我现在将如何获取所有悬停线的数据。感谢任何帮助！

4

1 回答 1

10

使用scale.invert函数从 mousex 值中获取实际值。

var xValue = xScale.invert(mousex);

获得 xValue 后，使用数组平分线查找数组中值的索引。

声明平分线函数：

var bisectDate = d3.bisector(function(d) { return d.date; }).left;

以下是如何使用它：

var index = bisectDate(data, xValue, 1);

获得索引后，您可以在索引、索引 - 1 和索引 + 1 值之间选择最接近的值，并从数据中获取所有 yValue 和 xValue。

var finalIndex = getDesiredIndex(data, index); //Implement getDesiredIndex to get the left, right or center whatever index you think is perfect for your graph.

我的假设是您的数据来自对象数组。所以data[finalIndex].yValue1, data[finalIndex].yValue2.....应该是你要找的。

如果您需要我为您提供更具体的实现或工作示例，请添加一个 jsFiddle，我可以为您编辑它。

于 2013-09-02T15:29:21.990 回答