D3放大离子

Question

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

但是，一旦将其带入该位置，该代码似乎在单击时会炸毁-它将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版中可以解决此问题。