How can I expand child nodes when a node is clicked in d3? - d3.js

Question

I am new to d3 and I'm a trying to make a visualization with interactive nodes where each node can be clicked. When the node is clicked it should expand to show child nodes. I was able to get all the nodes to display interactively and I added an on click event, but I am not sure how I can get the child nodes to expand on click.
I am using the data from data.children in the onclick function and passing it to d3.hierarchy to set the data as the root. I am just not sure how to expand the data.
I am looking to make something like this where the circle node is in the center and the child nodes expand around it/outwards.
child child
\ /
node
|
child
Does anyone have any suggestions on how I could achieve this? I found d3.tree in the docs but that is more of a horizontal tree structure.
export default function ThirdTab(): React.MixedElement {
const ref = useRef();
const viewportDimension = getViewportDimension();
useEffect(() => {
const width = viewportDimension.width - 150;
const height = viewportDimension.height - 230;
const svg = d3
.select(ref.current)
.style('width', width)
.style('height', height);
const zoomG = svg.attr('width', width).attr('height', height).append('g');
const g = zoomG
.append('g')
.attr('transform', `translate(500,280) scale(0.31)`);
svg.call(
d3.zoom().on('zoom', () => {
zoomG.attr('transform', d3.event.transform);
}),
);
const nodes = g.selectAll('g').data(annotationData);
const group = nodes
.enter()
.append('g')
.attr('cx', width / 2)
.attr('cy', height / 2)
.attr('class', 'dotContainer')
.style('cursor', 'pointer')
.call(
d3
.drag()
.on('start', function dragStarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.03).restart();
d.fx = d.x;
d.fy = d.y;
})
.on('drag', function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
})
.on('end', function dragEnded(d) {
if (!d3.event.active) simulation.alphaTarget(0.03);
d.fx = null;
d.fy = null;
}),
);
const circle = group
.append('circle')
.attr('class', 'dot')
.attr('r', 20)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.style('fill', '#33adff')
.style('fill-opacity', 0.3)
.attr('stroke', '#b3a2c8')
.style('stroke-width', 4)
.attr('id', d => d.name)
.on('click', function click(data) {
const root = d3.hierarchy(data.children);
const links = root.links();
const nodes = root.descendants();
console.log(nodes);
});
const label = group
.append('text')
.attr('x', d => d.x)
.attr('y', d => d.y)
.text(d => d.name)
.style('text-anchor', 'middle')
.style('fill', '#555')
.style('font-family', 'Arial')
.style('font-size', 15);
const simulation = d3
.forceSimulation()
.force(
'center',
d3
.forceCenter()
.x(width / 2)
.y(height / 2),
)
.force('charge', d3.forceManyBody().strength(1))
.force(
'collide',
d3.forceCollide().strength(0.1).radius(170).iterations(1),
);
simulation.nodes(annotationData).on('tick', function () {
circle
.attr('cx', function (d) {
return d.x;
})
.attr('cy', function (d) {
return d.y;
});
label
.attr('x', function (d) {
return d.x;
})
.attr('y', function (d) {
return d.y + 40;
});
});
}, [viewportDimension.width, viewportDimension.height]);
return (
<div className="third-tab-content">
<style>{`
.tooltip {
position: absolute;
z-index: 10;
visibility: hidden;
background-color: lightblue;
text-align: center;
padding: 4px;
border-radius: 4px;
font-weight: bold;
color: rgb(179, 162, 200);
}
`}</style>
<svg
ref={ref}
id="annotation-container"
role="img"
title="Goal Tree Container"></svg>
</div>
);
}

Answer 1

useEffect(() => {
const width = viewportDimension.width - 150;
const height = viewportDimension.height - 230;
const svg = d3
.select(ref.current)
.style('width', width)
.style('height', height);
const zoomG = svg.attr('width', width).attr('height', height).append('g');
const g = zoomG
.append('g')
.attr('transform', `translate(500,280) scale(0.31)`);
svg.call(
d3.zoom().on('zoom', () => {
zoomG.attr('transform', d3.event.transform);
}),
);
const nodes = g.selectAll('g').data(annotationData);
const simulation = d3
.forceSimulation(annotationData)
.force(
'center',
d3
.forceCenter()
.x(width / 2)
.y(height / 2),
)
.force('charge', d3.forceManyBody().strength(1));
const group = nodes
.enter()
.append('g')
.attr('x', d => d.x)
.attr('y', d => d.y)
.attr('id', d => 'container' + d.index)
.attr('class', 'dotContainer')
.style('white-space', 'pre')
.style('cursor', 'pointer')
.call(
d3
.drag()
.on('start', function dragStarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.03).restart();
d.fx = d.x;
d.fy = d.y;
})
.on('drag', function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
})
.on('end', function dragEnded(d) {
if (!d3.event.active) simulation.alphaTarget(0.03);
d.fx = null;
d.fy = null;
}),
);
simulation.on('tick', function () {
group.attr('transform', function (d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
children
.attr('x', function (d) {
return d.x;
})
.attr('y', function (d) {
return d.y;
});
});
simulation.force(
'collide',
d3.forceCollide().strength(0.1).radius(170).iterations(10),
);
let currentlyExpandedNode;
let currentNode;
const circle = group
.append('circle')
.attr('class', 'dot')
.attr('id', d => {
return 'circle' + d.index;
})
.attr('r', 20)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.style('fill', '#33adff')
.style('fill-opacity', 0.3)
.attr('stroke', 'gray')
.style('stroke-width', 4)
.on('click', function click(data) {
currentNode = d3.select(`#container${data.index}`);
if (currentlyExpandedNode) {
d3.selectAll('.child').remove();
d3.selectAll('#child-text').remove();
}
currentlyExpandedNode = data;
const pie = d3
.pie()
.value(() => 1)
.sort(null);
const circlex1 = +currentNode.select(`#circle${data.index}`).attr('cx');
const circley1 = +currentNode.select(`#circle${data.index}`).attr('cy');
const children = currentNode
.selectAll('line.child')
.data(pie(data.children))
.enter()
.append('line')
.attr('stroke', 'gray')
.attr('stroke-width', 1)
.attr('stroke-dasharray', '5 2')
.attr('class', 'child')
.attr('x1', circlex1) // starting point
.attr('y1', circley1)
.attr('x2', circlex1) // transition starting point
.attr('y2', circley1)
.transition()
.duration(300)
.attr('x2', circlex1 + 62) // end point
.attr('y2', circley1 - 62);
const childrenCircles = currentNode
.selectAll('circle.child')
.data(data.children)
.enter()
.append('circle')
.attr('class', 'child')
.attr('cx', () => circlex1 + 70)
.attr('cy', () => circley1 - 70)
.attr('r', 10)
.style('fill', '#b3a2c8')
.style('fill-opacity', 0.8)
.attr('stroke', 'gray')
.style('stroke-width', 2);
children.each(childData => {
currentNode
.append('text')
.attr('x', () => circlex1 + 80)
.attr('y', () => circley1 - 100)
.text(childData.data.name)
.attr('id', 'child-text')
.style('text-anchor', 'middle')
.style('fill', '#555')
.style('font-family', 'Arial')
.style('font-size', 15);
});
});
group
.append('text')
.attr('x', d => d.x)
.attr('y', d => d.y + 50)
.text(d => d.name)
.style('text-anchor', 'middle')
.style('fill', '#555')
.style('font-family', 'Arial')
.style('font-size', 15);
const children = group.selectAll('.child-element');
}, [viewportDimension.width, viewportDimension.height]);`