D3等分日期总是返回0或30



我有一个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,但不返回任何其他值。我最好的猜测是我的日期格式错误,但我还没有能够修复它。

对于可能有同样问题的人:

我像这样排序数据

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

它不能工作,因为d3的平分函数只对按升序排序的数据起作用。

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

这个修复了问题。

最新更新