tree using D3 tree v4 . Need different shapes for inner node and leaf node

Question

I am creating "network tree" where we need to find in a network which node has any issue. we need to track that node. As some of the tree node will have max 100 of children i dont want to show textbox for leaf node as it will not look tidy, instead i want to show a small compact circle with color code red/green. Other nodes which are not leaf nodes will be represented using TextBox. I am using append("rect") but i want to check if the node is inner node it will append "rect" else it will append "circle".

I am referring this example https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460

I need something like this at the leaf node. As in my data there can be 100 of children ,i want to combine that into one group that is big rectangle inside it small rectangle for each children.

Answer 1

Probably this will help you in the below link.https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460 Update width property according to your requirement, in reactNode object.

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

update rx & ry value to achieve circular radius. 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)');