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

【问题标题】：tree using D3 tree v4 . Need different shapes for inner node and leaf node树使用 D3 树 v4 。内部节点和叶节点需要不同的形状
【发布时间】：2019-01-08 00:05:20
【问题描述】：

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

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

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

【问题讨论】：

到目前为止你做了什么？如果你什么都没做，没人会为你写代码。
我引用此代码bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460。在叶节点中，我想要不同的形状，即圆形而不是矩形

标签： javascript html css angular d3.js

【解决方案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)');

【讨论】：