在 d3 中向 Voronoi 图添加点

Question

我正在使用 d3 创建一个图表，以尝试在一个绘制平面上的点的函数中加速最近的 nabour 搜索。

有没有办法将点直接添加到图表中，这样我就可以在 while 循环中添加点，而不是重新绘制整个 voronoi？

var svg = d3.select("svg")

var distance = function(pa, pb) {
  var x = pa[0] - pb[0],
    y = pa[1] - pb[1]
  return Math.sqrt((x * x) + (y * y))
}
var scatterCircle = function(point, radius, quantity, proximity, margin) {
  var x1 = point[0] - radius,
    y1 = point[1] - radius,
    inner = radius * margin,
    array = [
      [500, 500]
    ]
  //should be declaring diagram here and addings points below//
  while (array.length < quantity) {
    //constructing new diagram each loop to test function, needs add to diagram function//
    var newpoly = d3.voronoi()(array),
      x = x1 + (radius * 2 * Math.random()),
      y = y1 + (radius * 2 * Math.random()),
      ii = newpoly.find(x, y).index
    var d = distance(array[ii], [x, y]),
      e = distance([x, y], point)
    if (e < inner) {
      if (d > proximity) {
        array.push([x, y])
      }
    }
  }
  return array
}
var test = scatterCircle([500, 500], 500, 1500, 10, 0.9)
var o = 0
while (o < test.length) {
  svg.append("circle")
    .attr("cx", test[o][0])
    .attr("cy", test[o][1])
    .attr("r", 1)
  o++
}

<script src="https://d3js.org/d3.v4.js"></script>
<svg width="1000" height="1000">

Answer 1

我不是 d3.js 方面的专家，但我会分享我的发现。 Voronoi 图的实现算法是Fortune's algorithm。这是计算 Voronoi 图的经典算法。插入新点既不是该算法的一部分，也不是函数集documented for d3.js 的一部分。但你是对的，插入一个新站点理论上不需要重新绘制整个图表。

---

您将 Voronoi 图用于 NNS（最近邻搜索）。您也可以使用2d-tree 来完成NNS。那里的插入和移除更容易。快速搜索发现了 javascript 中的两个实现：kd-tree-javascript 和 kd-tree-js。