d3.js - D3 v4 四叉树根返回未定义

Question

我正在使用 D3 v4，但无法让四叉树工作。它不断返回根的未定义。我认为它不喜欢我提供给它的数据。

    const Nodes = [];
for (let i = 0; i < 10; i++) {
  Nodes.push({
    radius: 5,
    x: Math.random() * 500,
    y: Math.random() * 500,
    velocityX: Math.random(),
    velocityY: Math.random()
  });
}

collide() {
  var quadtree = d3.quadtree().extent([
    [
      0, 0
    ],
    [1500, 1000]
  ]).addAll(Nodes);

  console.log(quadtree);
}

Answer 1

让我们看看 Nodes 数组中的任何给定对象:

[{
    radius: 5,
    x: 301.25792388143293,
    y: 35.626900264457696,
    velocityX: 0.43542026096574715,
    velocityY: 0.03662733324854717
}]

如您所见，x 和 y 坐标在具有 "x" 和 "y"< 的属性中定义 作为键。

但是，这是 d3.quadtree 中 x 坐标的默认函数:

function x(d) {
    return d[0];
}

对于 y 坐标:

function y(d) {
    return d[1];
}

如您所见，这些函数不适用于您的对象结构。

解决方案:

根据您的对象设置x和y坐标:

var quadtree = d3.quadtree()
    .x(function(d) {
        return d.x
    })
    .y(function(d) {
        return d.y
    })

这是经过更改的代码，请检查控制台:

const Nodes = [];
for (let i = 0; i < 10; i++) {
  Nodes.push({
    radius: 5,
    x: Math.random() * 500,
    y: Math.random() * 500,
    velocityX: Math.random(),
    velocityY: Math.random()
  });
}

var quadtree = d3.quadtree().extent([
    [
      0, 0
    ],
    [1500, 1000]
  ]).x(function(d) {
    return d.x
  })
  .y(function(d) {
    return d.y
  })
  .addAll(Nodes);

console.log(quadtree);

<script src="https://d3js.org/d3.v4.min.js"></script>