D3 放大离子

Question

过去几周我一直在尝试在 Ionic 中制作交互式 D3 地图 - 一个简单的 svg，当您选择一个州时会生成该州的邮政编码。这段代码很好，并且可以在 ionic 之外工作。

然而，一旦它被带到那里，代码似乎会在点击时爆炸——它会将 svg 的中心重置在之前点击的位置。因此，当您单击德克萨斯州，然后单击威斯康星州时，地图会跳回德克萨斯州。否则，平移和缩放工作正常。

我想知道这里是否有人看过任何在 Ionic 中使用平移和缩放的工作示例，或者可以指出任何可能导致这种奇怪行为的因素。

    var zoom = d3.behavior.zoom()
.scaleExtent([1, 4])
.on("zoom", move);

var width = 350;
var height = width / 2;

var topo,projection,path,svg,g;

var tooltip = d3.select("#map").append("div").attr("class", "tooltip hidden");

setup(width,height);

function setup(width,height){
  projection = d3.geo.albersUsa()
    .scale(500)
    .translate([width / 2, height / 2]);

  path = d3.geo.path()
      .projection(projection);

  svg = d3.select("#map").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .call(zoom);

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


d3.json("usa.topojson", function(error, usa) {

  var states = topojson.feature(usa, usa.objects.states).features;

  topo = states;
  draw(topo);

});

function draw(topo) {

  var states = g.selectAll(".states").data(topo);

  states.enter().insert("path")
      .attr("class", "states")
      .attr("d", path)
      .attr("post", function(d,i) { return d.properties.postal; })
      .attr("id", function(d,i) { return d.id; });

  states.on("click", function(d, i){
    console.log(d.properties.postal)
  });
}

function redraw() {
  width = 350;
  height = width / 2;
  d3.select('svg').remove();
  setup(width,height);
  draw(topo);
}

function move() {
  var t = d3.event.translate;
  var s = d3.event.scale;  

  g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}

Answer 1

我创建了一个拉取请求来解决问题。现在接受了：https://github.com/driftyco/ionic/pull/4589

所以希望在 1.2 版本中，这个问题将被消除。