view raw
JARRRRG JARRRRG - 5 months ago 43
Javascript Question

d3.js (d.geometry.coordinates) issue when placing labels

I'm trying to place labels using the larskotthoff block page

The issue I'm having is where the labels translate is worked out on the line.

.attr("transform", function (d) {
return "translate(" + projection(d.geometry.coordinates[0][0][0]) + ")";

So in his guide he is not doing d.geometry.coordinates[0][0][0] but just d.geometry.coordinates. This works for him because he is not working out the labels for multi-polygons because when I tried without the [0][0][0]

So my labels are not where they should be as you can see in the following image.

Map photo

Although I've managed to get the labels drawing the structure of my feature (in this case d) is different and not a single array of coordinates. It is a 3 dimension array. So for this reason the placement (translate) is happening based on the first element [0][0][0] of each dimension. How do I overcome this? I want it to work out its placement from the whole set of polygons. Does d3 make something available for this?

UPDATE: Solution (thanks to Lars)

.attr("class", "place-label")
.attr("transform", function (d) {
return "translate(" + path.centroid(d) + ")";
.attr("x", function (d) {
return path.centroid(d)[0] > -1 ? 6 : -6;
.attr("dy", ".35em")
.style("text-anchor", function (d) {
return path.centroid(d)[0] > -1 ? "start" : "end";


As Lars Kotthoff confirms in comment. To get the centre location from a node/feature you can use path.centroid as described in the d3 documentation below.