d3 树 - 缩放时如何自动调整节点间距答案

【问题标题】：d3 Tree - How to auto adjust node spacing when zoomingd3 树 - 缩放时如何自动调整节点间距
【发布时间】：2019-10-17 18:45:51
【问题描述】：

我有一个具有缩放和平移功能的 d3 树。对于任何父节点，树都可以有大量子节点。这可能导致垂直挤压节点。

我希望节点在缩小时自动调整间距，尤其是垂直间距。

附加的d3 svg和d3代码的缩放部分：

var svg = d3.select("#tree_container")
.append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom)
  .call( d3.behavior.zoom().on( "zoom", function () {
                    svg.attr( "transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")" )
                } ) )
  .append("g");

Fiddle

【问题讨论】：

标签： d3.js

【解决方案1】：

设置节点大小就足够了吗？然后d3会自动调整节点的位置。

var radius = 10;

var tree = d3.layout.tree()
  .size([height, width])
  .nodeSize([radius*2+3]);

...

function update(source) {

  ...

  nodeUpdate.select("circle")
    .attr("r", radius)

作为Fiddle

【讨论】：