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

Question

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

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

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

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