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

（私はかなりあなたのコードでは達成したいのか理解していなかったので、私は特にあなたの質問のタイトルに対処するつもりだことを告白：「Aの中央にラベルを追加する方法パス"）。

D3は、パスの中心を位置決めするための便利な機能を有し、path.centroidと呼ば：

指定にGeoJSONオブジェクトの（典型的にはピクセル単位）投影平面の重心を返し

。これは、州や郡の境界にラベルを貼る、またはシンボルマップを表示するのに便利です。

あなたのラベルを配置するためにそれを使用することができます：

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

ここで（ちょうどオンラインコードを発見した）USAマップとデモです。私は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>