處理多個多邊形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

回答

相關問題