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

Question

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

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

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

在 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进行验证。

编辑 - 与上面相同的示例，用于渲染完整多边形的凸包实现。http://jsfiddle.net/arunkjn/EpBCH/1/注意多边形#4 的区别