d3.js在路径中心添加标签 [英] d3.js add a label in the center of a path

问题描述

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

how to add a label in the center of path programmatically without using the BBOX method because it does not work with banana shapes

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>

推荐答案

(我承认我不太了解您想用代码实现什么，因此，我将专门解决您的问题. title :如何在路径中心添加标签").

(I confess that I quite didn't understand what you want to achieve with your code, so, I'm going to address specifically your question's title: "how to add a label in the center of a path").

D3具有用于定位路径中心的便捷功能，称为

D3 have a handy function for locating the center of the path, called path.centroid:

返回指定的GeoJSON对象的投影平面质心(通常以像素为单位).例如，这对于标记州或县的边界或显示符号图非常方便.

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.

您可以使用它来放置标签:

You can use it to position your labels:

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

这里是带有美国地图的演示(仅在网上找到了代码).我正在使用centroid定位每个路径的中心，并将其标记为"foo":

Here is a demo with a USA map (just found the code online). I'm locating the center of each path using centroid and labelling it with "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>

这篇关于d3.js在路径中心添加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！