处理多个多边形d3 [英] Process multiple polygons d3

问题描述

下面关于绘制多边形的答案适用于单个多边形。但是，如果有多个多边形呢？只需添加一个点的附加多边形似乎不工作，即使使用选择所有似乎表明可以添加几个多边形没有太多问题。

The answer below on drawing a polygon works well for a single polygon. However, what if there are more than one polygon? Simply adding an additional polygon with points seems not to work even though using "select all" would seem to indicate that it would be OK to add a couple more polygons without much problem..

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

We have an array of polygons, each of which has an attribute Points which is an array of points.

第一个多边形数组显然应该被映射，如上所述处理的每个成员的点阵列。但是如何使用d3来缩小这个两级结构？

The first array with polygon should obviously be mapped and the point arrays of each member processed as described. But how to spedify this two-level structure with d3?

D3中绘制多边形数据的正确格式

推荐答案

是简单和直接。只需将多边形数组作为数据传递给d3选择。
在你的情况下，似乎你使用的多边形是复合对象的数组，每个都有一个名为'Points'的键。我假设它看起来像这样 -

The answer is simple and straightaway. Just pass the array of polygons as data to d3 selection. In your case it seems that you are using an array of polygons which are composite objects, each having a key called 'Points'. I assume it looks something like this-

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

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

You can check the following working JSFiddle to verify.

EDIT - 用于渲染完整的多边形。 http://jsfiddle.net/arunkjn/EpBCH/1/ 注意多边形的区别＃ 4

EDIT- The same example as above with convex hull implementation for rendering complete polygons. http://jsfiddle.net/arunkjn/EpBCH/1/ Note the difference in polygon#4

这篇关于处理多个多边形d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！