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

Question

我正在创建“网络树”，我们需要在网络中找到哪个节点有任何问题。我们需要跟踪那个节点。由于某些树节点最多有 100 个子节点，我不想显示叶节点的文本框，因为它看起来不整洁，而是我想显示一个带有红色/绿色颜色代码的小型紧凑圆圈。其他不是叶节点的节点将使用 TextBox 表示。我正在使用 append("rect") 但我想检查节点是否是内部节点，它将附加“rect”，否则它将附加“circle”。

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

我在叶子节点需要这样的东西。在我的数据中可能有 100 个孩子，我想将其组合成一组，即每个孩子的小矩形内的大矩形。

标签： javascripthtmlcssangulard3.js

Answer 1

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

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

更新 rx & ry 值以实现圆半径。IE

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)');