如何避免 d3.zoom 在第一次缩放或平移时翻译？

Question

我尝试制作一个带有缩放和平移功能的组织结构图。为此，我需要调用 .nodeSize 将我的“根”转换为 (0,0)。然后我将它重新翻译成 width/2 就可以了。但是当我实现 d3.zoom 时，我的“根”回到（0,0）......我怎样才能避免这种行为？

这里是相关的代码：

var svg = d3.select("#svg1").append("svg")
  .attr("width", width)
  .attr("height", height)
  .call(d3.zoom().on("zoom", function () {
  svg.attr("transform", d3.event.transform);
  }))
  .append('g').attr("transform","translate(" + width / 2 + "," + 0 + ")");

感谢阅读。

编辑：我做了一个 JSFiddle，所以你可以试试我当前的代码。不要注意大的铃铛（我的真实项目中没有它们）=> https://jsfiddle.net/rhz1n8m4/12/

Answer 1

将缩放应用到width/2 变换下方的节点。

重命名您的变量以反映它们包含的内容：svg 不包含 svg 元素。

var svg = d3.select("#svg1").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform); }))
.append('g').attr("transform","translate(" + width / 2 + "," + 0 + ")")
.append('g');

编辑

@Zoom 提出了一个带有transform-origin 的解决方案（参见编辑历史），显然是一种解决方法。更好的是重新排列g 元素。

将缩放应用于width/2 变换上方的节点。

  var svg1 = d3.select("#svg1")
    .append("svg")
      .attr("width", width)
      .attr("height", height)
    .call(d3.zoom().on("zoom", function () { svg1.attr("transform", d3.event.transform); }))
    .append('g');
  var svg = svg1.append('g')
      .attr("transform","translate(" + width / 2 + "," + 0 + ")");

阅读 d3-zoom 文档页面，您可能会发现不使用 transform 属性的不同解决方案。