избежать масштабирования от сброса после нажатия svg d3 - PullRequest
Новая
       48

избежать масштабирования от сброса после нажатия svg d3

1 голос
/ 14 февраля 2020

У меня есть элемент SVG; узлы, ссылки, метки и т. д. c. добавлены к нему. Я запустил функцию масштабирования для конкретного узла по имени, но проблема заключается в том, что после автоматического масштабирования до соответствующего узла, всякий раз, когда я пытаюсь выполнить панорамирование 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
      );


  }
...