1

在 d3js 网站的两个示例中：

简易版

更复杂

我发现他们的一些代码很难理解。D3 参考 API 没有提供深入的解释。在简单版本中，顶点是使用 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 个数字。我似乎看不到复杂示例中的两行如何创建如此复杂的对象并将其附加到每个子数组的末尾。

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

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

4

0 回答 0