Как получить путь centroid 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)); 
}); 

Надеется, что это помогает!