Как получить центроид пути d3

Я не могу использовать метод .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; })
        ;

format d3.js centroid
person Peter    schedule 03.11.2015    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете сделать что-то вроде этого:

//calculate the centroid using the 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));
});
person Cyril Cherian    schedule 04.11.2015
comment
Я пробовал это, но функция getBBox() тоже возвращает NaN, NaN. - person Peter; 04.11.2015
comment
Я хотел бы знать, каков правильный формат ввода для функций getBBox/centroid. Я пробовал с параметром массива [10,10,20,20,30,30], но не работает. - person Peter; 04.11.2015
comment
что такое 10,10 20 30... вы должны передать элемент пути - person Cyril Cherian; 04.11.2015