d3.js add a label in the center of a path - d3.js

Question

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>

Answer 1

(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 have a handy function for locating the center of the path, called 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.
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];
})
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>