d3 - положение текста на карте

Я пытаюсь нанести метки на административные районы на этой карте Украины. Инструменты разработчика Chrome говорят мне, что они существуют с правильной меткой и координатами. Тем не менее, они не отображаются на карте.

Карта

Код, который я использовал:

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");

Кто-нибудь знает, почему они не появляются на карте?

1 ответ

Решение

Если вы измените свой вывод с:

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

чтобы:

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

Вы увидите текст появится.

Если вы посмотрите на свой код, вы можете бросить .attr('text',function(d){return d.properties.NAME_1;}) порция и использовать что-то вроде .text(function(d) {return d.properties.NAME_1;});,

Другие вопросы по тегам