具有重置功能的D3js缩放

Question

我在一个项目中使用 D3js，需要缩放功能和重置缩放的能力。我的问题是缩放功能就像从未发生过重置一样。这是我的代码：

function load() {
  var svg = d3.select("body")
    .append("svg")
    .attr("width", "100%")
    .attr("height", "100%");
  var zoom = d3.zoom().on("zoom", function() {
    d3.select("#vis").attr("transform", d3.event.transform);
  });
  var vis = svg.call(zoom).append("g").attr("id", "vis");
  d3.select("body").on("keypress", function() {
    if (d3.event.shiftKey) {                                                                                                        
      if (d3.event.key == "R") {                                                                                                    
        vis.transition().duration(500).attr("transform", d3.zoomIdentity);
      }
    }
  });
  vis.append("rect")
    .attr("x", 10)
    .attr("y", 10)
    .attr("width", 100)
    .attr("height", 100);
}

这是一个运行问题示例： http://bl.ocks.org/nicmcd/a74b0bfba61f50d932dedd6534ad7d9e

如何获取重置操作以重置缩放功能的内部状态，以便未来的事件将基于重置状态？

Answer 1

我的代码有两个问题。首先，转换需要来自 svg 而不是 vis。其次，重置转换不能使用attr()手动完成，必须使用call()完成。这是修改后的有效代码：

  function load() {
    var svg = d3.select("body")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%");

    var zoom = d3.zoom().on("zoom", function() {
      vis.attr("transform", d3.event.transform);
    });

    var vis = svg.append("g").attr("id", "vis");
    svg.call(zoom);

    d3.select("body").on("keypress", function() {
      svg.transition().duration(500).attr("transform", d3.zoomIdentity)          
    });

    vis.append("rect")
      .attr("x", 10)
      .attr("y", 10)
      .attr("width", 100)
      .attr("height", 100);
  }

这是一个工作示例： http://bl.ocks.org/nicmcd/4c730aa64c04bf100a58f224b90c2ff4

感谢 Andrew Reid 指出错误。

具有重置功能的D3js缩放

D3js zoom with reset function

javascript

svg

zooming

d3.js