d3 / d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Home Page:https://d3js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using quadtree in D3 V7.x fails,but in D3 v3.5x succeed

Fanyini opened this issue · comments

data format : [{x: 25.145748, y: -32.481388 }{x: -25.587538, y: -19.253717},{ x: 52.273457, y: -31.70754},{ x: -38.36791, y: 25.459534},{ x: -28.713305, y: -11.89719},{ x: 4.384515, y: 11.107072},……]
in d3 v3.5x :
let quadTree = d3.geom.quadtree(data);
console.log(quadTree)
it return the correct data.
eg.
1637412758(1)
But in d3 v7.x:
I know that quadtree has been rewritten.
let quadTree = d3.quadtree().addAll(data)
console.log(quadTree)
it return null data :
eg.
1637414285(1)

Hi there. Please read the documentation for d3-quadtree:

https://github.com/d3/d3-quadtree/blob/main/README.md

Specifically, note that the default accessor for d3-quadtree changed in newer releases: it now expects data of the form [[x1, y1], [x2, y2], …] by default, instead of [{x: x1, y: y1}, {x: x2, y: y2}, …]. Hence, if you want to use your data as-is with d3.quadtree, you must specify your own x- and y-accessors like so:

d3.quadtree(data, d => d.x, d => d.y)

Here is a live notebook to demonstrate: https://observablehq.com/d/1983f5ce96d1e404