d3.js中多行的动态工具提示

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

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

目前我已经使用上面的代码来获取该行。 我现在如何在hover时获取所有线路的数据。 感谢任何帮助！

Answer 1

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

 var xValue = xScale.invert(mousex); 

获得xValue后，使用array bisector查找数组中值的索引。

声明平分函数：

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

以下是如何使用它：

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

获得索引后，可以选择index，index – 1和index + 1之间最近的值，并从数据中获取所有yValues和xValues。

 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，我可以为您编辑它。