javascript - D3 : draw interactive hover line in multiple line chart for array object

Question

我正在尝试制作带有悬停线的 d3 图，数据是从服务器获取的，如下所示:

data = [
   {
      key: 'series_1',
      values: [
         {
            time: 1420257136216,
            value: 123
         },
         ... ...
      ]
   },
   ... ...
]

这里是我的代码的快速浏览:Fiddle

问题:

我无法根据 d3 bisector 函数的 x 值(时间)获得正确的 y 值，bisector 函数返回的索引不是我期望的。

我在谷歌上做了一些搜索，按照这个例子 d3.js Multi-series line chart interactive ，用于平分线的数据如下:

data = [
          {
            series_1: '123',
            series_2: '234',
            time: '1420257136216'
          },
          ....
       ]

我是否需要像上面的格式一样限制我的数据(并对数据进行排序)才能从 d3 bisector 函数获得正确的返回索引？或者还有其他方法可以实现吗？

非常感谢

Answer 1

您的二等分函数对于您的数据来说是错误的。你有:

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

但是你的属性(property)是时间:

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

然后您可以将其(对于第一个系列)称为:

bisectDate(data[0].values, someTimeStamp);

如果您的系列数据未按时间排序，则执行以下操作:

var arr = data[0].values;
arr.sort(function(a, b) { return a.time - b.time; });
bisectDate(arr, someTimeStamp);

已更新fiddle .