javascript - d3 - map 上文本的位置

Question

我正在尝试在这张乌克兰 map 上的行政区域上添加标签。 Chrome 开发者工具告诉我它们具有正确的标签和坐标。尽管如此，它们并没有出现在 map 上。

The map

我使用的代码:

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

有人知道为什么他们没有出现在 map 上吗？

Answer 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;}) 部分并使用类似 的内容。文本(function(d) {return d.properties.NAME_1;});。