D3，更新缩放/平移绘制的数据答案

【问题标题】：D3, update plotted data upon zoom/panD3，更新缩放/平移绘制的数据
【发布时间】：2015-04-11 07:17:42
【问题描述】：

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

这是基本设置：

 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/

你看到当你放大绘制的点不动。仍然坚持这个:(。谢谢！

【问题讨论】：

您能否向我们展示整个代码，也许在 jsfiddle 中？
@SteveBennett 我已经把整个控制器放在了一个小提琴中 - jsfiddle.net/bL4mmty6，我将努力获得一个运行副本，可能需要一点时间
@SteveBennett 已添加 - 抱歉花了这么长时间！

标签： javascript d3.js

【解决方案1】：

这是一个更新的小提琴：http://jsfiddle.net/o3dxgfuu/12/

我所做的更改是：

添加了一个新的g 元素来保存circle.pin 元素：

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

将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
      ]) + ")"

    })

在缩放处理程序中转换新的 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 应用到组元素。

【讨论】：