1

我是D3新手。我的目标是创建一个地图，在其上绘制一个 SVG 图层并定义区域，然后标记这些区域。

标签有错误。我可以成功添加它们，但是当我平移和缩放它们时，它们不会随地图移动。我感觉它与为文本标签确定的“x”和“y”值有关，但我不确定这些值应该是什么。

adminDivisions.selectAll("text")
.data(geoJson.features)
.enter()
.append("text")
.text(function(d){
   return d.properties.title;
})
.attr("x",function(d){
   return path.centroid(d)[0];
})
.attr("y", function(d){
   return path.centroid(d)[1];
});

我的代码基于此：Overlay d3 paths on Google Maps? 还有这个：将州名添加到 d3.js 中的地图中

带有示例代码的 JSFiddle：http: //jsfiddle.net/vZmrZ/

任何建议都会很棒！

4

1 回答 1

5

我想出了答案！x 和 y 属性需要调用两次，一次在“进入”之前，一次在“进入”之后，以便在地图移动时更新。不再有平移和缩放问题:)

adminDivisions.selectAll("text")
                    .data(geoJson.features)
                    .attr("x",function(d){
                        return path.centroid(d)[0];                         
                    })
                    .attr("y", function(d){
                        return path.centroid(d)[1];                         
                    }) 
                    .enter()                        
                    .append("text")
                    .text(function(d){
                        return d.properties.name;
                    })
                    .attr("x",function(d){
                        return path.centroid(d)[0];                         
                    })
                    .attr("y", function(d){
                        return path.centroid(d)[1];

                    });

更新小提琴：http: //jsfiddle.net/vZmrZ/1/

于 2013-03-11T16:39:53.823 回答