在d3中为Voronoi图添加点

时间:2017-05-04 17:25:33

标签: javascript d3.js voronoi

我正在使用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++
}
&#13;
<script src="https://d3js.org/d3.v4.js"></script>
<svg width="1000" height="1000">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

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

您使用Voronoi图表进行NNS(最近邻搜索)。您还可以使用2d-tree来完成NNS。插入和移除更容易。快速搜索在javascript中显示了两个实现:kd-tree-javascriptkd-tree-js