樹使用 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 對象中更新寬度屬性。

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