Question

我正试图在乌克兰这张地图上的行政区域贴上标签。 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");

有人知道，他们为什么不出现在地图上？

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

d3 - 文本在地图上的位置

1 个答案: