D3, обновить данные с изображениями при масштабировании/панорамировании

Question

У меня есть куча точек, нанесенных на карту D3 topojson с некоторыми данными json, и я работаю над попыткой увеличить ее. У меня очень простая работа с масштабированием, однако точки, которые я построил, не перемещаются и не обновляются с увеличением.

Смотрите здесь - http://jsfiddle.net/o3dxgfuu/6/

Вот основной набор вверх:

var svg = d3.select("#map").append("svg") 
.attr("preserveAspectRatio", "xMidYMid") 
.attr("viewBox", "0 0 " + width + " " + height) 
.attr("width", m_width) 
.attr("height", m_width * height/width); 

svg.append("rect") 
.attr("class", "background") 
.attr("width", width) 
.attr("height", height) 

    var g = svg.append("g"); 

d3.json("scripts/world-110m2.json", function(error, us) { 
    g.append("g") 
.attr("id", "countries") 
.selectAll("path") 
.data(topojson.feature(us, us.objects.countries).features) 
.enter() 
.append("path") 
.attr("id", function(d) { return d.id; }) 
.attr("d", path) 

}); 

А затем точки нанесены в функции таким образом я могу поменять их по мере необходимости (это может быть, часть этого вопроса, Я не слишком уверен) -

function plotPoints(data){ 
svg.selectAll("circle") 
.transition() 
.delay(function(d, i) { return i * 2; }) 
.attr("r", 0) 
.remove() 

svg.selectAll(".pin") 
.data(data.earthquakes) 
.enter().append("circle", ".pin") 
.on('mouseover', tip.show) 
.on('mouseout', tip.hide) 
.attr("transform", function(d) { 
return "translate(" + projection([ 
    d.lon, 
    d.lat 
]) + ")" 

}) 
.attr("r", 0) 
.transition() 
.duration(500) 
.delay(function(d, i) { return i * 5; }) 
.attr("r",function(d){ 
    return d.magnitude/2; 
}) 

Я использую методы масштабирования, я нашел некоторые довольно хорошие примеры -

var zoom = d3.behavior.zoom() 
.on("zoom",function() { 
    g.attr("transform","translate("+ 
     d3.event.translate.join(",")+")scale("+d3.event.scale+")"); 
    g.selectAll(".pin") 
     .attr("d", path.projection(projection)); 

}); 

svg.call(zoom) 

так что зум и кастрюля отлично работают, у меня возникают проблемы с попыткой обновить мои набросанные точки, когда я увеличиваю масштаб и панорамирование, похоже, что они сейчас на листе стекла по карте, t, когда я перемещаю карту. Благодаря!

Edit: Я сделал пример этого здесь -

http://jsfiddle.net/o3dxgfuu/6/

Вы видите, когда вы увеличиваете точки на графике не двигаются. .! Все еще застряли на этом :(Спасибо

Answer 1

Вот обновленная скрипка с ним работать: http://jsfiddle.net/o3dxgfuu/12/

Изменения, которые я сделал являются:

1. Добавлена ​​новый g элемента для удерживания circle.pin элементов:

   var g = svg.append("g"); 
   var gPins = svg.append("g"); //new g element 
   

2. Добавлены circle элементов в новом g элемент:

   // svg.selectAll(".pin") 
   gPins.selectAll(".pin") // add circles to new g element 
       .data(data.earthquakes) 
   .enter().append("circle", ".pin") 
       .attr("transform", function(d) { 
       return "translate(" + projection([ 
        d.lon, 
        d.lat 
        ]) + ")" 
   
       }) 
   

3. Transform новый g элемент в обработчике трансфокатора

   var zoom = d3.behavior.zoom() 
       .on("zoom",function() { 
        g.attr("transform","translate("+ 
         d3.event.translate.join(",")+")scale("+d3.event.scale+")"); 
        gPins.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")"); // transform new g element 
   
       }); 
   

В принципе, вы должны добавить свои circle элементы в группу, а затем применяя transform к элемент группы.