4

.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]);
     });

私のデータ形式は次のとおりです。1つのオブジェクトはポリゴンの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; })
        ;
4

1 に答える 1

7

次のようなことができます。

//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));
});
于 2015-11-04T00:31:18.620 に答える