D3 + Google Maps +路徑+標籤Bugih平移和縮放

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

我的代碼是基於關閉的這一點：Overlay d3 paths onto Google Maps? 這個：Add names of the states to a map in 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/