reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-23 14:39:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix enter + update selections

Browse Source
This commit is contained in:
Nathan Bierema 2023-01-02 09:05:06 -05:00
parent c2f9cccbb4
commit e37af54c1b
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/d3-state-visualizer/src/charts/tree/tree.ts
View File

@ -387,7 +387,7 @@ export default function (
nodePositions.forEach((node) => (nodePositionsById[node.id] = node)); nodePositions.forEach((node) => (nodePositionsById[node.id] = node));
// process the node selection // process the node selection
const node = vis let node = vis
.selectAll< .selectAll<
SVGGElement, SVGGElement,
HierarchyPointNodeWithPrivateChildren<InternalNode> HierarchyPointNodeWithPrivateChildren<InternalNode>
@ -458,6 +458,8 @@ export default function (
.text((d) => d.data.name) .text((d) => d.data.name)
.on('click', onClickText); .on('click', onClickText);
node = nodeEnter.merge(node);
// update the text to reflect whether node has children or not // update the text to reflect whether node has children or not
node.select('text').text((d) => d.data.name); node.select('text').text((d) => d.data.name);
@ -475,13 +477,10 @@ export default function (
); );
// transition nodes to their new position // transition nodes to their new position
const nodeUpdate = nodeEnter const nodeUpdate = node
.merge(node) .transition()
// .transition() .duration(transitionDuration)
// .duration(transitionDuration) .attr('transform', (d) => `translate(${d.y},${d.x})`);
.attr('transform', (d) => {
return `translate(${d.y},${d.x})`;
});
// ensure circle radius is correct // ensure circle radius is correct
nodeUpdate.select('circle').attr('r', nodeStyleOptions.radius); nodeUpdate.select('circle').attr('r', nodeStyleOptions.radius);
@ -540,12 +539,14 @@ export default function (
nodeExit.select('text').style('fill-opacity', 0); nodeExit.select('text').style('fill-opacity', 0);
// update the links // update the links
const link = vis let link = vis
.selectAll<SVGGElement, HierarchyPointLink<InternalNode>>('path.link') .selectAll<SVGPathElement, HierarchyPointLink<InternalNode>>(
'path.link'
)
.data(links, (d) => d.target.data.id); .data(links, (d) => d.target.data.id);
// enter any new links at the parent's previous position // enter any new links at the parent's previous position
link const linkEnter = link
.enter() .enter()
.insert('path', 'g') .insert('path', 'g')
.attr('class', 'link') .attr('class', 'link')
@ -565,9 +566,11 @@ export default function (
}); });
for (const [key, value] of Object.entries(linkStyles)) { for (const [key, value] of Object.entries(linkStyles)) {
link.style(key, value); linkEnter.style(key, value);
} }
link = linkEnter.merge(link);
// transition links to their new position // transition links to their new position
link.transition().duration(transitionDuration).attr('d', linkHorizontal); link.transition().duration(transitionDuration).attr('d', linkHorizontal);