具有重置功能的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指出了錯誤。