D3 + Google Maps + Paths + Labels Ошибка witih Панорамирование и масштабирование

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/