d3.js 在路径的中心添加标签

Question

如何在不使用 BBOX 方法的情况下以编程方式在路径中心添加标签，因为它不适用于香蕉形状

d3.json("mapgeo.json", function(json) {
                //Bind data and create one path per GeoJSON feature
                paths =     g.selectAll("path")
                           .data(json.features)
                           .enter()
                           .append("path")
                           .attr('name', function(d) { 
                                return d.properties.name.toLowerCase(); 
                            })
                           .attr("d", path)
                           .attr("id", function(d, i) {  return 'polygon'+i;})
                           .style("fill", "steelblue"); 
    for(var i=0;i<paths[0].length;i++){
        var pp = paths[0][i].__data__.properties;
        svg
        .append('text')
        .attr("x", 145)
        .attr("dy", 105)
    .append("textPath")
    .attr("xlink:href","#polygon"+i)
        .text(paths[0][i].__data__.properties.temperature+' C°');
    }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513 C 756 327,756 327, 878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>

Answer 1

(我承认我完全不明白你想用你的代码实现什么，所以，我将专门解决你的问题的标题:“如何在路径的中心”)。

D3 有一个方便的函数用于定位路径的中心，称为 path.centroid :

Returns the projected planar centroid (typically in pixels) for the specified GeoJSON object. This is handy for, say, labeling state or county boundaries, or displaying a symbol map.

您可以使用它来定位您的标签:

.attr("x", function(d) {
    return path.centroid(d)[0];
})
.attr("y", function(d) {
    return path.centroid(d)[1];
})

这是一个带有美国 map 的演示(刚刚在网上找到代码)。我正在使用 centroid 定位每条路径的中心并用“foo”标记它:

var width = 500,
    height = 400;

var projection = d3.geoAlbersUsa()
    .scale(700)
    .translate([width / 2, height / 2]);

var path = d3.geoPath()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


d3.json("https://dl.dropboxusercontent.com/u/232969/cnn/us.json", function(error, us) {


    svg.selectAll(".state")
        .data(topojson.feature(us, us.objects.states).features)
        .enter().append("path")
        .attr("d", path)
        .attr('class', 'state');

    svg.selectAll(".stateText")
        .data(topojson.feature(us, us.objects.states).features)
        .enter().append("text")
        .attr("x", function(d) {
            return path.centroid(d)[0];
        })
        .attr("y", function(d) {
            return path.centroid(d)[1];
        })
        .attr("text-anchor", "middle")
        .attr("font-size", "12px")
        .text("foo")

});

.state {
  fill: none;
  stroke: black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>