避免在单击svg d3之后重置缩放变换

Question

我有一个svg元素；节点，链接，标签等被附加到其上。我运行了“按名称缩放特定节点”功能，但是问题是自动缩放到相应的节点后，每当我尝试平移svg（单击并拖动它）时，它都会重置缩放和坐标放大到特定节点之前的状态。我认为这与d3.event.transform的工作方式有关，但我无法修复它。我希望能够从缩放到的节点继续平移和缩放而无需重置任何值。

（另外，通过一点调试，我观察到节点的cx和cy坐标没有通过代码的缩放和平移而改变，但是如果我手动缩放和平移到一个节点，那么它将我想这就是问题所在

  var svg1 = d3.select("svg");
  var width = +screen.width;
  var height = +screen.height - 500;

  svg1.attr("width", width).attr("height", height);

  var zoom = d3.zoom();
  var svg = svg1
    .call(
      zoom.on("zoom", function() {
        svg.attr("transform", d3.event.transform);
      })
    )
    .on("dblclick.zoom", null)
    .append("g");


function highlightNode() {
    var userInput = document.getElementById("targetNode");
    theNode = d3.select("#" + userInput.value);
    const isEmpty = theNode.empty();
    if (isEmpty) {
      document.getElementById("output").innerHTML = "Given node doesn't exist";
    } else {
      document.getElementById("output").innerHTML = "";
    }
    svg
      .transition()
      .duration(750)
      .attr(
        "transform",
        "translate(" +
          -(theNode.attr("cx") - screen.width / 2) +
          "," +
          -(theNode.attr("cy") - screen.height / 4) +
          ")"
        // This works correctly
      );


  }