Question

在d3js网站的两个例子中：

我发现他们的一些代码难以理解。 D3参考API没有提供深入的解释。在easy版本中，顶点是使用Math.random（）生成的，如下所示：

var vertices = d3.range(100).map(function(d) {
  return [Math.random() * width, Math.random() * height];
});

宽度和高度是文档大小。这样可以确保所有顶点都在SVG元素的范围内（svg标记的width和height属性也设置为这些值）。

然而，在更复杂的版本中，它使用算法生成顶点：

var vertices = d3.range(numVertices).map(function(d) { return {x: d.x, y: d.y}; })
voronoiVertices = vertices.map(function(o){return [o.x,  o.y, o]})
path = path.data(d3.geom.voronoi(voronoiVertices))

在控制台中检查变量vertices时。我发现它是一个二维数组。每个子数组的长度为3，第一个和第二个元素是数字，最后一个元素是一个包含更多属性的对象，如x，y和index等。

生成的Voronoi图非常不同。这是为什么？它们都是使用d3.geom.voronoi()和（我希望能够理解的）生成的，唯一的区别在于传递给它的对象。在简单的例子中，它只是一个二维数组，每个子数组中有2个数字。我似乎无法看到复杂示例中的两条线如何工作来创建这样一个复杂的对象并将其附加到每个子数组的末尾。

如何确保验证也在父SVG元素的范围内？

我真的被困了，非常感谢你的帮助。

在d3js中为voronoi图生成顶点

0 个答案: