d3.js - 用 d3 船体剪辑 d3 voronoi

Question

我想画一个d3 voronoi图并像d3 hull borders一样剪裁它确实绑定(bind)了一组节点或任何类似的剪裁。

Screenshot 中的红线展示了我想要实现的目标。

如何做到？

Answer 1

d3.geom.hull 函数将找到一个包含所有节点的多边形，没有额外的间距。这当然会抵消 Voronoi 区域的大部分用途，Voronoi 区域旨在在节点周围添加一些事件空间。所以你需要计算的是一个在所有边上都比凸包多边形大一定padding距离的多边形。

我推荐的算法:

• 使用 d3.geom.hull(nodes)计算定义节点紧密边界的顶点数组。

• 使用这些顶点创建一个 d3 polygon object .

• 使用 .centroid() 计算该多边形的中心。

• 对于凸包中的每个顶点，计算一个距离多边形中心更远的填充距离的点。

• 使用这个展开的多边形裁剪Voronoi function 返回的数组中的所有多边形.

示例代码:

var hullFunction = d3.geom.hull()
                     .x(/*x accessor function*/)
                     .y(/*y accessor function*/);

var tightHull = hullFunction(nodes); //returns an array of vertices

var centerPoint = d3.geom.polygon(tightHullArray).centroid();

var expandedHull = tightHullArray.map( function(vertex) {
             //Create a new array of vertices, each of which is the result
             //of running this function on the corresponding vertex of the
             //original hull.
             //Each vertex is of the form [x,y]

             var vector = [vertex[0] - centerPoint[0], 
                           vertex[1] - centerPoint[1] ];
             //the vector representing the line from center to this point

             var vectorLength = Math.sqrt(vector[0]*vector[0] 
                                          + vector[1]*vector[1]);
             //Pythagorus' theorem to get the length of the line

             var normalizedVector = [vector[0] / vectorLength, 
                                     vector[1] / vectorLength];
             //the vector scaled down to length 1, but with the same angle
             //as the original vector

             return [vertex[0] + normalizedVector[0]*padding,
                     vertex[1] + normalizedVector[1]*padding ];
             //use the normalized vector to adjust the vertex point away from
             //the center point by a distance of `padding` 

         });

var clippedVoronoi = voronoiPolygons.map(function(voronoi) {
       //voronoiPolygons would be the array returned by the voronoi function

              return expandedHull.clip(voronoi);
              //I think this is correct; if you get weird results, try
              // return voronoi.clip(expandedHull);
         });