javascriptd3.jsmapsprojectiontextlabel

d3 - Position of text on a map

im am trying to put labels on the administrative regions on this map of Ukraine. Chrome developer tools tells me that they exist with the right label and coordinates. Nonetheless they dont appear on the map.

The map

The code ive used:

d3.json('ukraine.geojson', function(data){


var group = canvas.selectAll('g')
    .data(data.features)
    .enter()
    .append('g')

var projection =  d3.geo.mercator().scale([2400]).translate([-900,2650]);
var path = d3.geo.path().projection(projection);

var areas = group.append('path')
         .attr('d',path)
         .attr('class','area')
         .attr('fill','steelblue');


group.append('text')
     .attr('x', function(d){ return path.centroid(d)[0];})
     .attr('y', function(d){ return path.centroid(d)[1];})
     .attr('text',function(d){return d.properties.NAME_1;})
     .style("font-size","14px");

Does anybody know, why they dont appear on the map ?

Solution

  • If you change your output from:

    <text x="414.512507938402" y="272.3826318168442" text="Cherkasy" style="font-size: 14px;"></text>

    to:

    <text x="414.512507938402" y="272.3826318168442" style="font-size: 14px;">Cherkasy</text>

    You will see the text appear.

    If you look at your code you can drop the .attr('text',function(d){return d.properties.NAME_1;}) portion and use something like .text(function(d) {return d.properties.NAME_1;});.