D3 平分日期总是返回 0 或 30答案

【问题标题】：D3 bisect dates always returns 0 or 30D3 平分日期总是返回 0 或 30
【发布时间】：2021-08-17 08:08:36
【问题描述】：

我有一个我正在尝试构建的 d3 折线图。 x 轴由日期组成。我想跟踪鼠标并返回鼠标位置的日期和价格。我在使用平分线函数时遇到了问题。

const x = d3
      .scaleTime()
      .domain(d3.extent(data, (d) => d.datetime))
      .range([0, width]);

const data = [
 {datetime: Fri Aug 13 2021 00:00:00 GMT+0700 (Indochina Time), close: "149.10001"}, 
{datetime: Thu Aug 12 2021 00:00:00 GMT+0700 (Indochina Time), close: "148.89000"},
{datetime: Wed Aug 11 2021 00:00:00 GMT+0700 (Indochina Time), close: "145.86000"},
{datetime: Tue Aug 10 2021 00:00:00 GMT+0700 (Indochina Time), close: "145.60001"},
...
    ];

const bisect = d3.bisector((d) => d.datetime).left;

const mousemove = () => {
const x0 = x.invert(d3.pointer(e)[0]); ----->returns datetime value
let i = bisect(data, x0, 1); ----->always returns 1 or 30 (30 === data.length)
let d1 = data[i]; 
 ....
}

bisect 函数总是返回 1 或 30，但从不返回任何其他值。我最好的猜测是我的日期格式错误，但我无法修复它。

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

对于可能遇到相同问题的任何人：

我是这样对数据进行排序的

data.sort((a, b) => {
      return b.datetime -  a.datetime
    });

它不起作用，因为 d3 的 bisector 函数仅适用于按 ASCENDING 顺序排序的数据。

data.sort((a, b) => {
      return a.datetime - b.datetime;
    });

这解决了问题。

【讨论】：