使用D3树v4的树。内部节点和叶节点需要不同的形状

Question

我正在创建“网络树”，我们需要在网络中查找哪个节点有问题。我们需要跟踪该节点。由于某些树节点最多可容纳100个孩子，因此我不想显示叶节点的文本框，因为它看上去不会很整洁，而是希望显示一个带有红色/绿色颜色代码的小圆圈。不是叶节点的其他节点将使用TextBox表示。 我正在使用append（“ rect”），但我想检查该节点是否为内部节点，它将追加“ rect”，否则将追加“ circle”。

我指的是这个示例https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460

我在叶子节点上需要这样的东西。因为在我的数据中可以有100个孩子，所以我想将其合并为一组，其中每个孩子都是一个小矩形。

Answer 1

可能这会在下面的链接中为您提供帮助。 https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460 根据您的要求，在 reactNode 对象中更新 width 属性。

var rectNode = {
                    width: 45, // 120
                    height: 45,
                    textMargin: 5
                },

更新 rx 和 ry 值以实现圆半径。即

nodeEnter.append('g').append('rect')
                    .attr('rx', 20)
                    .attr('ry', 20)
                    .attr('width', rectNode.width)
                    .attr('height', rectNode.height)
                    .attr('class', 'node-rect')
                    .attr('fill', function (d) {
                        return d.color;
                    })
                    .attr('filter', 'url(#drop-shadow)');