1

我有一个 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
      );


  }
4

0 回答 0