D3 平分日期总是 returns 0 或 30

Question

我有一个我正在尝试构建的 d3 折线图。 x 轴由日期组成。我想跟踪鼠标和 return 鼠标位置的日期和价格。我对平分线函数有问题。

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]; 
 ....
}

平分函数总是 returns 1 或 30 但从来没有任何其他值。我最好的猜测是我将日期格式设置错了，但我无法修复它。

Answer 1

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

我是这样整理数据的

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

它不起作用，因为 d3 的平分线函数仅适用于按升序排序的数据。

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

这解决了问题。

D3 平分日期总是 returns 0 或 30

D3 bisect dates always returns 0 or 30

javascript

svg

d3.js