更改SVG內容時是否保留d3縮放狀態？

Question

我正在使用d3渲染某些內容，並使用d3.zoom進行鼠標縮放。 它可以工作，但是我還需要定期更改svg的內容（執行完整的$('svg').html($('svg').html())調用，因為我的SVG包含HTML）。

問題是當我這樣做時，我失去了縮放狀態。 我試圖通過存儲縮放變換並在更新后重新應用來跟蹤它，但是它不起作用。

這是我嘗試使用的筆 ，使用dagre-d3示例圖。

簡而言之，這就是我正在做的事情：

let transform;

function dag(){
  // ... set up stuff here

  var svg = d3.select("svg"),
      inner = svg.select("g");

  // Set up zoom support
  var zoom = d3.zoom().on("zoom", function() {
        //store transform
        transform = d3.event.transform
        inner.attr("transform", d3.event.transform);
      });
  svg.call(zoom);

  // render graph
  new dagreD3.render()(inner, g);

  // Center the graph
  var initialScale = 0.75;
  svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));

  svg.attr('height', g.graph().height * initialScale + 40);
}

setInterval(() => {
  // simulate reloading content
  dag()
  console.log('render again')
  //try and apply saved transform state
  transform && inner.attr("transform", transform);
}, 2000)

Answer 1

在縮放功能中設置了轉換后，再次使用'initialScale'變量來設置svg比例，問題可以在這里看到：

  // Center the graph
  var initialScale = 0.75;
  svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));

為了解決這個問題，您需要根據svg的當前比例轉換來更改“ initialScale”變量中的值。 如此處所示：

  // Center the graph
  var initialScale = (typeof transform != 'undefined') ? transform.k : 0.75;
  svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));

帶有修復的代碼的代碼筆： https ://codepen.io/anon/pen/MBwBYY?editors=0011