D3：在数组对象的多折线图中绘制交互式悬停线

Question

我正在尝试制作一个带有悬停线的 d3 图表，数据是从服务器获取的，例如：

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

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

问题：

我无法从 d3 二分线函数获得基于 x 值（时间）的正确 y 值，二分线函数的索引 return 不是我期望的。

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

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

在我从 d3 等分线函数获得正确的 return 索引之前，我是否需要像上面的格式一样限制我的数据（也对数据进行排序）？或者我可以通过任何其他方式实现它？

非常感谢

Answer 1

你的二分函数对你的数据是错误的。你有：

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

但是你的属性是 time:

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。

D3：在数组对象的多折线图中绘制交互式悬停线

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

javascript

d3.js