Question

所以我在这里看到这个d3树：

正如您所看到的，树有点复杂，一些假名可能很长。我的主要问题是：

我们可以改变特定结的颜色（一些蓝色，一些红色）并且我有什么方法可以使假期的文本与前一级别的链接不重叠？特别是当链接是一条直线时会发生这种情况。

我的JS技能至少缺乏说法，因为这些是我迈向这个世界的宝贝，任何帮助都会受到高度赞赏。

谢谢！

Answer 1

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

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

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

你的第二个问题的答案要复杂得多。您要求的功能不是内置于D3中，因此您必须自己完成。请注意，这将是一件非常复杂的事情，因为您必须动态地找出链接和文本元素的位置和边界框。以一般方式这样做将是一个重大项目。

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