处理多个多边形d3

以下关于绘制多边形的答案适用于单个多边形。但是，如果有多个多边形呢？尽管使用“全部选择”似乎表明可以在没有太多问题的情况下添加更多的多边形，但只需添加多边形似乎不起作用。处理多个多边形d3

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

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

Proper format for drawing polygon data in D3

来源

2013-02-18 user2083625

什么不适合你？我可以添加没有问题的第二个多边形，请参阅http://jsfiddle.net/4xXQT/52/ – 2013-02-25 10:43:15

@LarsKotthoff您应该将此发布为答案。我看不出你的代码有什么问题。 – 2013-02-26 04:33:32

答案很简单，通俗易懂。只需将多边形数组作为数据传递给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. 
];

你只写有相当于地图功能，这可以写成如下 -

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);

您可以检查时使用d.Points，而不是d以下工作JSFiddle进行验证。

EDIT-与上述相同的例子，用于渲染完整多边形的凸包实现。 http://jsfiddle.net/arunkjn/EpBCH/1/注意多边形的差异＃4

来源

2013-02-26 23:10:45 arunkjn

您的jsfiddle（http://jsfiddle.net/2zF9J/）显示了一个具有单个4顶点多边形的示例。也许你粘贴了错误的链接？ – 2013-03-03 10:08:34

@CharlBotha我已经更新了答案中的Jsfiddle链接。对不起，以前的错误链接。 – arunkjn 2013-03-08 06:06:12

我们可以在这个例子中添加工具提示吗？ – 2014-12-19 08:09:07

处理多个多边形d3

回答

相关问题