在 D3.js 树布局中为每个节点单独指定 nodeSize

Question

如何为每个节点单独设置 D3 树布局的节点大小？在我的例子中，我有一棵包含不同大小节点的树，当节点宽度变化时，设置 d3.layout.tree().nodeSize([300, 200]); 会导致奇怪的间距。 nodeSize 似乎是为数不多的不将函数作为参数的 D3 函数之一。我找到的最接近的是分离功能，但是并没有真正解决问题。

有什么办法，还是需要自己手动计算位置？

Answer 1

为什么分离功能没有解决您的问题？

你得到两个节点作为分离函数的参数。如果设置 nodeSize([1, 200]) 并计算分隔函数内两个节点的实际宽度，则可以添加适当的分隔。

.separation(function(a, b) {
  var totalWidth = a.width + b.width;
  return (totalWidth / 2) + 10;
})

也许你需要更多的计算宽度，但没有你的代码我无法猜测你的节点宽度是如何计算的。

在 D3.js 树布局中为每个节点单独指定 nodeSize

Specifying nodeSize for each node individually in D3.js tree layout

javascript

tree

spacing

d3.js