如何獲得路徑質心d3

Question

我不能使用.centroid（）方法，因爲它的返回[NaN，Nan]。 我不知道什麼是正確的數據格式。

var pathh = d3.geo.path(); 
    d3.selectAll("path.line") 
     .each(function (d, i) { 
     var centroid = pathh.centroid(d); 
     console.log('Centroid at: ', d,+ centroid[0] + ', ' + centroid[1]); 
    }); 

我的數據格式爲： 一個目的是多邊形

0: Object 
    area_id: "IVP001" 
    vertex_id: "37451" 
    x: "100" 
    y: "100" 

1: Object 
    area_id: "IVP001" 
    vertex_id: "37452" 
    x: "150" 
    y: "120" 

2: Object 
    area_id: "IVP001" 
    vertex_id: "37453" 
    x: "50" 
    y: "120" 

有母體陣列包含什麼多邊形的頂點對象的一個​​點（頂點）。 我想獲取多邊形的每個質心，並在其中附加文本。

我半正確的解決方案，但它不是那麼準確，它的醜陋......

var areas = cg.selectAll("g.area-group") 
     .data(data);  

    var ag = areas 
      .enter() 
      .append("g") 
      .attr("class","area-group") 
      .attr("data-area-id",function(d) {return d[0].area_id; }); 

    var area_path = ag.insert("path") 
      .attr("class", "line") 
      .call(dragArea); 

     d3.selectAll("text").remove(); 




var area_id_text = areas.append("text") 
      .attr("dx", function(d) { 
        var text_x = 0; 
        $.each(d, function(index, value) { text_x += +value.x;}); 
        return text_x/d.length; 
       }) 
      .attr("dy", function(d) { 
        var text_y = 0; 
        $.each(d, function(index, value) { text_y += +value.y; }); 
        return text_y/d.length; 
       }) 
      .text(function(d) {return d[0].area_id; }) 
     ; 

Answer 1

你可以做這樣的事情：

//calculate the centroid using teh bbox 
function getMyCentroid(element) { 
    var bbox = element.getBBox(); 
    return [bbox.x + bbox.width/2, bbox.y + bbox.height/2]; 
} 

d3.selectAll("path.line")[0].forEach(function (d, i) { 
    console.log(getMyCentroid(d)); 
}); 

希望這有助於！