将 d3.js 树从版本 3 迁移到 6 - 我缺少什么？

Question

So I've been trying to migrate this great d3.js tree ( http://bl.ocks.org/robschmuecker/7880033 ) from d3.js version 3 to version 6. Currently I am trying to get the drag and drop working (see below for the code). But It just doesn't work the way it is supposed to be. After rearranging a node via drag and drop, the tree isn't properly drawn. What's more, drag and drop doesn't seem to work for all nodes (except for the root node, which is intended). I couldn't find out so far why this happens. I suspect that the problem could be that the tree data is not properly updated after updating the children. Unfortunately, not many tutorials for d3.js are based on version 6 (at least to my knowledge) so I wasn't really able to find much useful information.

Any tips would be appreciated. Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <title>d3.js tree V6</title>
    <meta charset="utf-8"/>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        body {
            font-family: Arial;
        }
        #title {
            font-size: 30px;
            margin-top: 20px;
        }
        .container {
            margin: 0 auto;
        }
        .text-center {
            text-align: center;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }

        svg {
            display: block;
            margin: auto;
        }

        .node {
            cursor: pointer;
        }

        .ghostCircle.show{
            display:block;
        }

        .ghostCircle, .activeDrag .ghostCircle{
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- title -->
        <h1 class="text-center" id="title">d3.js tree V6</h1>
        <div id="concept-tree">
        </div>
    </div>


    <script>
        var treeData = {
                "name": "Top Level",
                "parent": "null",
                "children": [
                    {
                        "name": "Level 2: A",
                        "parent": "Top Level",
                        "children": [
                            {
                                "name": "Son of A",
                                "parent": "Level 2: A"
                            },
                            {
                                "name": "Daughter of A",
                                "parent": "Level 2: A"
                            }
                        ]
                    },
                    {
                        "name": "Level 2: B",
                        "parent": "Top Level"
                    }
                ]
            };

        // +++ INITIALIZATIONS +++ //
        var margin = {top: 20, right: 90, bottom: 30, left: 90},
            width = 1500 - margin.left - margin.right,
            height = 750 - margin.top - margin.bottom;

        var duration = 750;

        const svg = d3.select("#concept-tree").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom),
            g = svg.append("g")
                .attr("transform",
                    "translate(" + margin.left + "," + margin.top + ")");

        root = d3.hierarchy(treeData, function(d) { return d.children; });
        root.x0 = height / 2;
        root.y0 = 0;

        // declares a tree layout and assigns the size
        var treemap = d3.tree().size([height, width]);

        var i = 0;

        var selectedNode = null;
        var draggingNode = null;


        // +++ FUNCTIONS +++ //
        function diagonal(s, d) {

            path = `M ${s.y} ${s.x}
            C ${(s.y + d.y) / 2} ${s.x},
              ${(s.y + d.y) / 2} ${d.x},
              ${d.y} ${d.x}`

            return path
        }

        svg.call(d3.zoom()
            .extent([[0, 0], [width, height]])
            .scaleExtent([1, 8])
            .on("zoom", zoomed));

        function zoomed({transform}) {
            g.attr("transform", transform);
        }

        // collapse the node and all it's children
        function collapse(d) {
            if(d.children) {
                d._children = d.children
                d._children.forEach(collapse)
                d.children = null
            }
        }

        function expand(d) {
            if (d._children) {
                d.children = d._children;
                d.children.forEach(expand);
                d._children = null;
            }
        }

        var overCircle = function(d) {
            selectedNode = d;
            //updateTempConnector();
        };
        var outCircle = function(d) {
            selectedNode = null;
            //updateTempConnector();
        };

        function centerNode(source) {
            /*scale = zoomEvent.scale();
            x = -source.y0;
            y = -source.x0;
            x = x * scale + viewerWidth / 2;
            y = y * scale + viewerHeight / 2;
            d3.select('g').transition()
                .duration(duration)
                .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
            zoomListener.scale(scale);
            zoomListener.translate([x, y]);*/
        }

        // toggle children on click
        function click(event, d) {
            if (event.defaultPrevented) return;

            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update(d);
            centerNode(d);
        }

        // for dragging nodes
        function dragEvent() {
            function dragstarted(event, d) {
                if (d == root) {
                    return
                }
                event.sourceEvent.stopPropagation();
            }
            function dragged(event, d) {
                var nodes = root.descendants();
                if (d == root) {
                    return
                }
                var domNode = this;
                initiateDrag(d, domNode);

                // move node
                d.x0 += event.dy;
                d.y0 += event.dx;
                var node = d3.select(this);
                node.attr("transform", "translate(" + d.y0 + "," + d.x0 + ")");
            }

            function dragended(event, d) {
                if (d == root) {
                    return
                }

                var domNode = this;

                function endDrag() {
                    selectedNode = null;
                    d3.selectAll('.ghostCircle').attr('class', 'ghostCircle');
                    d3.select(domNode).attr('class', 'node');
                    // now restore the mouseover event or we won't be able to drag a 2nd time
                    d3.select(domNode).select('.ghostCircle').attr('pointer-events', '');
                    //updateTempConnector();
                    if (draggingNode !== null) {
                        update(draggingNode);
                        centerNode(draggingNode);
                        draggingNode = null;
                    }
                }
                if (selectedNode) {
                    console.log(selectedNode);
                    // now remove the element from the parent, and insert it into the new elements children
                    var index = draggingNode.parent.children.indexOf(draggingNode);
                    if (index > -1) {
                        draggingNode.parent.children.splice(index, 1);
                    }
                    if (typeof selectedNode.children !== 'undefined' || typeof selectedNode._children !== 'undefined') {
                        if (typeof selectedNode.children !== 'undefined') {
                            selectedNode.children.push(draggingNode);
                        } else {
                            selectedNode._children.push(draggingNode);
                        }
                    } else {
                        selectedNode.children = [];
                        selectedNode.children.push(draggingNode);
                    }
                    // make sure that the node being added to is expanded so user can see added node is correctly moved
                    expand(selectedNode);
                    //sortTree();
                    endDrag();
                } else {
                    endDrag();
                }
            }

            return d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended);
        }


        function initiateDrag(d, domNode) {
            var nodes = d.descendants().slice(1),
                links = d.descendants();

            draggingNode = d;

            d3.select(domNode).select('.ghostCircle').attr('pointer-events', 'none');
            d3.selectAll('.ghostCircle').attr('class', 'ghostCircle show');
            d3.select(domNode).attr('class', 'node activeDrag');

            // remove link paths
            g.selectAll("path.link")
                .data(links, function(d) {
                    return d.id;
                }).remove();
            // remove child nodes
            g.selectAll("g.node")
                .data(nodes, function(d) {
                    return d.id;
                }).remove();
        }

        // main function
        function update(source) {

            // Assigns the x and y position for the nodes
            var treeData = treemap(root);

            // Compute the new tree layout.
            var nodes = treeData.descendants(),
                links = treeData.descendants().slice(1);

            // +++ NODES +++ //
            // update nodes
            var node = g.selectAll("g.node")
                .data(nodes, function(d) {
                    return d.id || (d.id = ++i);
                });

            // enter nodes
            var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .call(dragEvent())
                .attr("transform", function(d) {
                    return "translate(" + source.y0 + "," + source.x0 + ")";
                })
                .on("click", click);

            nodeEnter.append("circle")
                .attr('class', 'nodeCircle')
                .attr("r", 5)
                .style("fill", function(d) {
                    return d._children ? "blue" : "lightsteelblue";
                });

            nodeEnter.append("text")
                .attr("x", function(d) {
                    return d.children || d._children ? -10 : 10;
                })
                .attr("dy", ".35em")
                .attr('class', 'nodeText')
                .attr("text-anchor", function(d) {
                    return d.children || d._children ? "end" : "start";
                })
                .text(function(d) {
                    return d.data.name;
                })
                .style("fill-opacity", 1);

            // phantom node to give us mouseover in a radius around it
            nodeEnter.append("circle")
                .attr('class', 'ghostCircle')
                .attr("r", 30)
                .attr("opacity", 0.2) // change this to zero to hide the target area
                .style("fill", "red")
                .attr('pointer-events', 'mouseover')
                .on("mouseover", function(event, node) {
                    overCircle(node);
                })
                .on("mouseout", function(event, node) {
                    outCircle(node);
                });



            // update
            var nodeUpdate = nodeEnter.merge(node);

            // transition to the proper position for the node
            nodeUpdate.transition()
                .duration(duration)
                .attr("transform", function(d) {
                    return "translate(" + d.y + "," + d.x + ")";
                });


            // exit nodes
            var nodeExit = node.exit().transition()
                .duration(duration)
                .attr("transform", function(d) {
                    return "translate(" + source.y + "," + source.x + ")";
                })
                .remove();

            nodeExit.select('circle')
                .attr('r', 1e-6);

            nodeExit.select('text')
                .style('fill-opacity', 1e-6);


            // +++ LINKS +++ //
            // update links
            var link = g.selectAll("path.link")
                .data(links, function(d) {
                    return d.id;
                });

            // enter any new links at the parent's previous position
            var linkEnter = link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", function(d) {
                    var o = {x: source.x0, y: source.y0}
                    return diagonal(o, o)
                });

            // update
            var linkUpdate = linkEnter.merge(link);

            // transition back to the parent element position
            linkUpdate.transition()
                .duration(duration)
                .attr('d', function(d){ return diagonal(d, d.parent) });

            // remove any exiting links
            var linkExit = link.exit().transition()
                .duration(duration)
                .attr('d', function(d) {
                    var o = {x: source.x, y: source.y}
                    return diagonal(o, o)
                })
                .remove();

            // store old positions
            nodes.forEach(function(d){
                d.x0 = d.x;
                d.y0 = d.y;
            });
        }

        // collapse after the second level
        //root.children.forEach(collapse);

        update(root);
    </script>
</body>
</html>

EDIT

So after trying out a few things and further research I stumbled upon this question on GitHub: https://github.com/d3/d3-hierarchy/issues/139 . So, basically d3.hierarchy() does not seem to be flexible regarding updating its structure. If one wants to change the tree structure, there are two possibilities:

a) recompute the whole hierarchy via d3.hierarchy(...) (which will lead to the redrawing of the whole tree)

b) or change the data attributes 'manually', ie when changing the children of the nodes depth height needs to be changed as well for the relevant nodes (I'm not 100% sure whether both attributes need to be changed).

I went with option b) and it seems to work just fine. Hope this might help somebody in the future.

The only thing that doesn't seem to fully work yet are the mouseover/mouseout events when dragging a node to another node. For some of the nodes the events seem to fire not at all or both at once. I don't get it.