D3，在缩放/平移时更新绘制的数据

Question

我有一堆点用一些 json 数据绘制到 D3 topojson 地图上，我正在努力让它放大。我有一个非常简单的缩放工作，但是我绘制的点没有移动/更新飞涨。

见这里 - 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)

所以，缩放和平移效果很好，当我缩放和平移时，我无法尝试更新我的绘制点，看起来它们现在位于地图上方的一块玻璃上，并且在我移动时不会移动地图。谢谢！

编辑：我在这里做了一个例子 -

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. 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组元素。