Question

作为this question的后续，我设法用嵌套数组创建了一个多系列折线图。我现在正尝试将工具提示添加到类似于this post by Mike Bostock.

上的工具提示

这意味着我必须弄清楚一种方法，用于平分嵌套数组，然后为工具提示选择这些值。如何将下面的代码行传输到嵌套数组？

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

进一步加入剧本：

i = bisectDate(data, x0, 1),
    d0 = data[i - 1],
    d1 = data[i],

感谢您的帮助，这里有一个JS Fiddle示例，我想用它来创建工具提示：http://jsfiddle.net/JYS8n/2/

Answer 1

您需要在此处使用bisect两次，首先查找匹配的x值，然后找到匹配的y值。首先，您需要定义第二个将值考虑在内的自定义平分线。

var bisectValue = d3.bisector(function(d) { return d.Value; }).left;

处理程序的第一部分与非嵌套版本相比没有太大变化。唯一的区别是，我们不是只考虑单个数据系列，而是迭代所有数据系列，并为每个数据系列收集最接近的数据点。

var x0 = x.invert(d3.mouse(this)[0]),
    ds = data.map(function(e) {
        var i = bisectDate(e.Data, x0, 1),
            d0 = e.Data[i - 1],
            d1 = e.Data[i];
        return x0 - d0.Date > d1.Date - x0 ? d1 : d0;
    });

现在ds是一个数据点列表，最接近每个系列的光标位置。现在剩下要做的就是再次平分，找到与当前光标位置最接近的值。

var y0 = y.invert(d3.mouse(this)[1]),
    i = bisectValue(ds.sort(), y0, 1),
    d0 = ds[i - 1],
    d1 = ds[i],
    d = y0 - d0.Value > d1.Value - y0 ? d1 : d0;

基本骨架与之前相同，只是这次我们比较y和.Value。现在d是要突出显示的数据点。

focus.attr("transform", "translate(" + x(d.Date) + "," + y(d.Value) + ")");
focus.select("text").text(d.Value);

完整示例here。我也改变了线插值 - 虽然这使得它看起来更好，但该线不再通过实际点。

d3JS：对嵌套数组进行二等分

1 个答案: