javascript - 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
      );


  }