title: d3.js add a label in the center of a path
body: <p>how to add a label in the center of path programmatically without using the BBOX method because it does not work with banana shapes</p>
  
  <pre><code>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&lt;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°');
      }
      });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;svg width="400" height="300"&gt;
  &lt;g&gt;
  &lt;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)"&gt;&lt;/path&gt;
  &lt;/g&gt;
  &lt;text x="145" dy="105"&gt;&lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2"&gt;CF40&lt;/textPath&gt;&lt;/text&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>