d3JS：二等分嵌套数组

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。我还更改了线插值 - 虽然这使它看起来更好，但线不再穿过实际点。