大型树d3 v4中的重叠节点

Question

我用样本光斑数据构建了一个简单的树。但是，此树不适合我的svg，并且所有节点都相互重叠，如演示中所示。有什么方法可以解决给定SVG画布宽度和高度中子节点重叠的问题？我尝试使用here中给出的分隔符​​，但是没有用。而且我不知道如何在d3 v4中解决此问题。

vistors_email_subject

vistors_reward_email

python3 -m http.server

请注意，svg画布的尺寸应与预期的尺寸相同，因为我将宽度的25％保留用于其他用途。

Answer 1

您必须在更大的区域10*height上渲染树

var treemap = d3.tree()
  .size([10*height, width])
  .separation(function separation(a, b) { return a.parent == b.parent ? 2 : 2; });

然后将缩放比例设置为0.1的初始比例。

更改代码，因为您使用与How can I avoid d3.zoom translate on first zoom or pan?相同的陷阱

您的HTML无效。使用突出显示语法的编辑器。