Question

我正在尝试使用悬停线制作d3图表，数据是从服务器获取的，如：

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

以下是我的代码的快速浏览：Fiddle

问题：

我无法从d3平分函数得到x值（时间）的正确y值，从平分函数返回的索引不是我期望的那个。

我在google上进行了一些搜索，按照此示例d3.js Multi-series line chart interactive，用于bisector的数据如下：

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

在从d3 bisector函数获取正确的返回索引之前，是否需要限制我的数据（如上面的格式）（也是对数据进行排序）？或者我能以任何其他方式实现它？

非常感谢

Answer 1

您的bisect功能对您的数据有误。你有：

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：在多个折线图中为数组对象绘制交互式悬停线

1 个答案: