Question

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

以下是基本设置：

 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/

我所做的改变是：

添加了一个新的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应用于组元素。

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

1 个答案: