更改SVG内容时是否保留D3缩放状态?

我正在用d3渲染一些东西,并使用 d3.zoom 用鼠标缩放。它可以工作,但我还需要定期更改SVG的内容(执行完整的 $('svg').html($('svg').html()) 调用,因为我的SVG包含HTML)。

问题是当我这样做时,我会失去缩放状态。我试图通过存储变焦并在更新后重新应用来跟踪它,但它不起作用。

Here's a pen 在我的尝试中,使用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)