D3 + Google地图+路径+标签Bug witih Panning and Zooming

Question

我是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];
});

我的代码基于此:将d3路径覆盖到Google地图上？ 并且:在d3.js中将状态名称添加到地图中

JSFiddle示例代码:http://jsfiddle.net/vZmrZ/

任何建议都会很棒!

Answer 1

我想出了答案!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/