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

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

1 个答案: