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:

Возвращает прогнозируемый плоский центроид (обычно в пикселях) для указанного объекта GeoJSON. Это удобно, например, для обозначения границ штата или графства или отображения карты символов.

Вы можете использовать его, чтобы расположить метки:

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

Вот демо с картой США (только что нашел код в Интернете). Я местонахождение центра каждого пути с использованием 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>