Question

我尝试通过缩放和平移制作一个orgchart。为此，我需要调用.nodeSize，它将我的“根”转换为（0,0）。然后我按宽度/ 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属性的其他解决方案。

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

1 个答案: