将 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编码）。 但它并没有按照它应该的方式工作。 通过拖放重新排列节点后，未正确绘制树。 更重要的是，拖放似乎并不适用于所有节点（除了根节点，这是预期的）。 到目前为止，我无法找出为什么会发生这种情况。 我怀疑问题可能是更新孩子后树数据没有正确更新。 不幸的是，没有多少 d3.js 教程基于版本 6（至少据我所知），所以我真的找不到太多有用的信息。

任何提示将不胜感激。 谢谢！

<!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>

编辑

因此，在尝试了一些事情并进一步研究之后，我偶然发现了 GitHub 上的这个问题： https://github.com/d3/d3-hierarchy/issues/139 。 因此，基本上 d3.hierarchy() 在更新其结构方面似乎并不灵活。 如果要改变树形结构，有两种可能：

a) 通过 d3.hierarchy(...) 重新计算整个层次结构（这将导致整个树的重绘）

b) 或“手动”更改数据属性，即在更改节点的子节点时，也需要更改相关节点的深度高度（我不能 100% 确定是否需要更改这两个属性）。

我选择了选项 b)，它似乎工作得很好。 希望这可能对将来的某人有所帮助。

唯一似乎还没有完全工作的是当将节点拖到另一个节点时的鼠标悬停/鼠标退出事件。 对于某些节点，事件似乎根本不触发或同时触发。 我不明白。