d3.js - 处理多个多边形 d3

Question

下面关于绘制多边形的答案适用于单个多边形。但是，如果有多个多边形怎么办？简单地添加一个带有点的额外多边形似乎不起作用，即使使用“全选”似乎表明可以添加更多的多边形而没有太大问题..

我们有一个多边形数组，每个多边形都有一个属性点，它是一个点数组。

第一个带有多边形的数组显然应该被映射，并且每个成员的点数组都按照描述进行处理。但是如何用d3 spedify这个两级结构呢？

Proper format for drawing polygon data in D3

Answer 1

答案简单明了。只需将多边形数组作为数据传递给 d3 选择。在您的情况下，您似乎正在使用一组多边形，这些多边形是复合对象，每个多边形都有一个名为“Points”的键。我假设它看起来像这样-

var arrayOfPolygons =  [{
    "name": "polygon 1",
    "points":[
      {"x":0.0, "y":25.0},
      {"x":8.5,"y":23.4},
      {"x":13.0,"y":21.0},
      {"x":19.0,"y":15.5}
    ]
  },
  {
    "name": "polygon 2",
    "points":[
      {"x":0.0, "y":50.0},
      {"x":15.5,"y":23.4},
      {"x":18.0,"y":30.0},
      {"x":20.0,"y":16.5}
    ]
  },
  ... etc.
];

在编写等效的 map 函数时，您只需使用 d.Points 而不是 d，可以编写如下 -

vis.selectAll("polygon")
  .data(arrayOfPolygons)
  .enter().append("polygon")
  .attr("points",function(d) { 
    return d.points.map(function(d) { 
      return [scaleX(d.x),scale(d.y)].join(",");
    }).join(" ");
  })
  .attr("stroke","black")
  .attr("stroke-width",2);

您可以检查以下工作JSFiddle进行验证。

EDIT- 与上面相同的示例，使用凸包实现来呈现完整的多边形。 http://jsfiddle.net/arunkjn/EpBCH/1/注意多边形#4 的不同