Question

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

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

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

Proper format for drawing polygon data in D3

Answer 1

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

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.
];

在编写等效地图函数时，您只需使用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

的区别

处理多个多边形d3

1 个答案: