d3.js - D3 可折叠树，改变结的颜色并避免线/文本重叠

Question

所以我在这里使用这棵 d3 树：

如您所见，这棵树有点复杂，一些叶子名称可能很长。我的主要问题是：

我们可以更改特定结的颜色（一些蓝色，一些红色）吗？有什么办法可以使休假的文本不与上一级的链接重叠？尤其是当链接是直线时会发生这种情况。

我的 JS 技能至少可以说是缺乏，因为这些是我进入这个世界的婴儿步骤，任何帮助将不胜感激。

谢谢！

score 0 · Accepted Answer

你的第一个问题的答案很简单。在您的示例中，节点的颜色在第 90 行中设置 -

.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

要更改颜色，您需要做的就是调整这条线。在返回颜色的函数中，您可以访问绑定到节点的数据，因此您可以使用任何数据属性来决定颜色。请注意，此处仅设置了填充颜色，而不是轮廓描边颜色，但您可以轻松添加.style("stroke", ...).

第二个问题的答案要复杂得多。您要求的功能未内置到 D3 中，因此您必须自己执行此操作。请注意，这将是一件相当复杂的事情，因为您必须动态地计算出链接和文本元素的位置和边界框。以一般方式这样做将是一个重大项目。

我建议您尝试标签放置，以尽可能避免重叠。这会容易得多。

1 回答 1