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

如何获得路径质心d3

1 个答案: