javascript - D3 链接在特殊删除情况下中断-6ren

javascript - D3 链接在特殊删除情况下中断

转载作者：行者123 更新时间：2023-12-05 02:44:41

我在我的图表中添加了一个上下文菜单，我可以在其中使用我的添加和删除功能。无法删除接收连接的节点，警报会通知用户。此外，我可以“无限”添加节点。现在是有趣的“问题”部分。

情况 1:如果按从高到小的顺序删除节点，然后再添加一个新节点，则没问题。例如，删除节点 8 并在任意位置添加一个新节点。或者去掉节点8、7、6，然后再添加一个节点也可以。

情况 2:删除一个不在数组最后位置的节点，然后在任意位置添加一个节点。连接将断开。例如删除节点5，在3上添加新节点，节点8的连接会断开。

我对这个问题很在意。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Playground D3v6</title>
    <!-- favcon -->
    <link rel="icon" href="https://networkrepository.com/favicon.png">
    <!-- call external d3.js framework -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <!-- import multiselection framework -->
    <script src="https://d3js.org/d3-selection-multi.v1.js"></script>
    <!-- import "font awesome" stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>

<style>
    body {
        overflow: hidden;
        margin: 0px;
    }

    .canvas {
        background-color: rgb(220, 220, 220);
    }

    .link {
        stroke: rgb(0, 0, 0);
        stroke-width: 1px;
    }

    circle {
        background-color: whitesmoke;
    }

    .tooltip {
        font-family: "Open Sans", sans-serif;
        position: absolute;
        text-align: left;
        background: rgb(245, 245, 245);
        border: 2px;
        border-radius: 6px;
        border-color: rgb(255, 255, 255);
        border-style: solid;
        pointer-events: none;
        line-height: 150%;
        padding: 8px 10px;
    }

    #context-menu {
        font-family: "Open Sans", sans-serif;
        position: fixed;
        z-index: 10000;
        width: 190px;
        background: whitesmoke;
        border: 2px;
        border-radius: 6px;
        border-color: white;
        border-style: solid;
        transform: scale(0);
        transform-origin: top left;
    }

    #context-menu.active {
        transform: scale(1);
        transition: transform 200ms ease-in-out;
    }

    #context-menu .item {
        padding: 8px 10px;
        font-size: 15px;
        color: black;
    }

    #context-menu .item i {
        display: inline-block;
        margin-right: 5px;
    }

    #context-menu hr {
        margin: 5px 0px;
        border-color: whitesmoke;
    }

    #context-menu .item:hover {
        background: lightblue;
    }

</style>

<body>
    <!-- right click context menu -->
    <div id="context-menu">
        <div id="addObject" class="item">
            <i class="fa fa-plus-circle"></i> Add Node
        </div>
        <div id="removeObject" class="item">
            <i class="fa fa-minus-circle"></i> Remove Node
        </div>
    </div>

    <svg id="svg"> </svg>


    <!-- call script where the main application is written -->
    <script>
        var graph = {
            "nodes": [{
                "id": 0,
                "type": "Company",
                "name": "Company",
                "icon": "\uf1ad",
                "parent": 0
            },
            {
                "id": 1,
                "type": "Software",
                "name": "Software_1",
                "icon": "\uf7b1",
                "parent": 0
            },
            {
                "id": 2,
                "type": "Software",
                "name": "Software_2",
                "icon": "\uf78d",
                "parent": 0
            },
            {
                "id": 3,
                "type": "Software",
                "name": "Software_3",
                "icon": "\ue084",
                "parent": 0
            },
            {
                "id": 4,
                "type": "Software",
                "name": "Software_4",
                "icon": "\ue084",
                "parent": 0
            },
            {
                "id": 5,
                "type": "Software",
                "name": "Software_5",
                "icon": "\ue084",
                "parent": 3
            },
            {
                "id": 6,
                "type": "Software",
                "name": "Software_6",
                "icon": "\ue084",
                "parent": 3
            },
            {
                "id": 7,
                "type": "Software",
                "name": "Software_7",
                "icon": "\ue084",
                "parent": 4
            },
            {
                "id": 8,
                "type": "Software",
                "name": "Software_8",
                "icon": "\ue084",
                "parent": 4
            }
            ],
            "links": [{
                "source": 1,
                "target": 0,
                "type": "uses"
            },
            {
                "source": 2,
                "target": 0,
                "type": "uses"
            },
            {
                "source": 3,
                "target": 0,
                "type": "uses"
            },
            {
                "source": 4,
                "target": 0,
                "type": "uses"
            },
            {
                "source": 5,
                "target": 3,
                "type": "uses"
            },
            {
                "source": 6,
                "target": 3,
                "type": "uses"
            },
            {
                "source": 7,
                "target": 4,
                "type": "uses"
            },
            {
                "source": 8,
                "target": 4,
                "type": "uses"
            }
            ]
        }

        // declare initial variables
        var svg = d3.select("svg")
        width = window.innerWidth
        height = window.innerHeight
        node = null
        link = null
        thisNode = null;
        d = null;
        isParent = false;

        // define cavnas area to draw everything
        svg = d3.select("svg")
            .attr("class", "canvas")
            .attr("width", width)
            .attr("height", height)
            .call(d3.zoom().on("zoom", function (event) {
                svg.attr("transform", event.transform)
            }))
            .append("g")

        // remove zoom on dblclick listener
        d3.select("svg").on("dblclick.zoom", null)

        // append markers to svg
        svg.append('defs').append('marker')
            .attrs({
                'id': 'arrowhead',
                'viewBox': '-0 -5 10 10',
                'refX': 14,
                'refY': 0,
                'orient': 'auto',
                'markerWidth': 30,
                'markerHeight': 30,
                'xoverflow': 'visible'
            })
            .append('svg:path')
            .attr('d', 'M 0,-2 L 4 ,0 L 0,2')
            .attr('fill', 'black')
            .style('stroke', 'none');

        var linksContainer = svg.append("g").attr("class", "linksContainer")
        var nodesContainer = svg.append("g").attr("class", "nodesContainer")

        // iniital force simulation
        var simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function (d) {
                return d.id;
            }).distance(100))
            .force("charge", d3.forceManyBody().strength(-400))
            .force("center", d3.forceCenter(width / 2, height / 2))
            .force("attraceForce", d3.forceManyBody().strength(70));

        var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

        //create links
        link = linksContainer.selectAll(".link")
            .data(graph.links, d => d.id)
            .enter()
            .append("line")
            .attr("class", "link")
            .style("pointer-events", "none")
            .attr('marker-end', 'url(#arrowhead)')

        node = nodesContainer.selectAll(".node")
            .data(graph.nodes, d => d.id)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("stroke", "white")
            .attr("stroke-width", "2px")
            .call(d3.drag()
            .on("start", dragStarted)
            .on("drag", dragged)
            .on("end", dragEnded)
            )
            

        node.append("circle")
            .attr("r", 30)
            .style("fill", "whitesmoke")
            .on("mouseenter", mouseEnter)
            .on("mouseleave", mouseLeave)
            .on("contextmenu", contextMenu)

        node.append("text")
            .style("class", "icon")
            .attr("font-family", "FontAwesome")
            .attr("dominant-baseline", "central")
            .attr("text-anchor", "middle")
            .attr("font-size", 30)
            .attr("fill", "black")
            .attr("stroke-width", "0px")
            .attr("pointer-events", "none")
            .text(function (d) {
                return d.id
            })

        simulation
            .nodes(graph.nodes)
            .on("tick", ticked);

        simulation
            .force("link")
            .links(graph.links)

            function mouseEnter(event, d) {
            thisNode = d

            d3.select(this)
                .style("fill", "lightblue")
            tooltip.transition()
                .style("opacity", 1)
            tooltip.html(
                "ID: " + d.id + "<br/>" +
                "Name: " + d.name + "<br/>" +
                "Typ: " + d.type + "<br/>" +
                "Parent: " + d.parent)
                .style("left", (event.pageX) + 30 + "px")
                .style("top", (event.pageY - 80) + "px");
        }

        function mouseLeave(d) {
            switch (d.name) {
                case ("power-plug"):
                    tooltip.transition()
                        .style("opacity", 0);

                    return
                default:
                    d3.select(this).style("fill", "whitesmoke")

                    tooltip.transition()
                        .style("opacity", 0);

            }
        }

        function contextMenu(event, d) {
            thisNode = d

            tooltip.transition()
                .style("opacity", 0);

            event.preventDefault()

            var contextMenu = document.getElementById("context-menu")
            contextMenu.style.top = event.clientY + "px"
            contextMenu.style.left = event.clientX + "px"
            contextMenu.classList.add("active")

            window.addEventListener("click", function () {
                contextMenu.classList.remove("active")
            })

            document.getElementById("addObject").addEventListener("click", addNodeClicked)
            document.getElementById("removeObject").addEventListener("click", removeNodeClicked)
        }

        function addNodeClicked() {

            addNode(thisNode)
        }

        function addNode(d) {
            var newID = Math.floor(Math.random()*100000)

            graph.nodes.push({
                "id": newID,
                "type": "software",
                "name": "Software_" + newID,
                "icon": "\ue084",
                "parent": d.id,
            })

            graph.links.push({
                source: newID,
                target: d.id,
                type: "uses"
            })

            link = linksContainer.selectAll(".link")
                .data(graph.links)
                .enter()
                .append("line")
                .attr("class", "link")
                .style("pointer-events", "none")
                .attr('marker-end', 'url(#arrowhead)')
                .style("display", "block")
                .merge(link)

            node = nodesContainer.selectAll(".node")
                .data(graph.nodes)
                .enter()
                .append("g")
                .attr("class", "node")
                .attr("stroke", "white")
                .attr("stroke-width", "2px")
                .call(d3.drag()
                .on("start", dragStarted)
                .on("drag", dragged)
                .on("end", dragEnded)
                )
                
                .merge(node)

            node.append("circle")
                .attr("r", 30)
                .style("fill", "whitesmoke")
                .on("click", addNodeClicked)
                .on("mouseenter", mouseEnter)
                .on("mouseleave", mouseLeave)
                .on("contextmenu", contextMenu)
                .merge(node)

            node.append("text")
                .style("class", "icon")
                .attr("font-family", "FontAwesome")
                .attr("dominant-baseline", "central")
                .attr("text-anchor", "middle")
                .attr("font-size", 30)
                .attr("fill", "black")
                .attr("stroke-width", "0px")
                .attr("pointer-events", "none")
                .text(function (d) {
                    return d.id
                })
                .merge(node)

            simulation.nodes(graph.nodes);
            simulation.force("link").links(graph.links);

            //reheat the simulation
            simulation.alpha(0.3).restart()
            
            /*
            
            console.log("addNode: ")
            console.log(graph.nodes)
            console.log("---------")
            
            console.log("addLink: ")
            console.log(graph.links)
            console.log("---------")
            */
        }

        function removeNodeClicked() {
            removeNode(thisNode)
        }

        function removeNode(d) {
            var hasNeighborNodes = false

            link.filter((l) => {
                if (d.id == l.target.id) {
                    hasNeighborNodes = true
                }

            })

            if (hasNeighborNodes) {
                alert("Object can´t be deleted, beause of incoming connections. Please re-arrange or delete incoming connections first.")
                hasNeighborNodes = false

            } else if (!hasNeighborNodes) {


                var indexOfNodes = graph.nodes.indexOf(d)

                var indexOfLinks = graph.links.findIndex(element => element.source.id == d.id)
                
                graph.links.splice(indexOfLinks, 1)
                
                linksContainer.selectAll(".link")
                .data(graph.links)
                .exit()
                .remove()
                

                graph.nodes.splice(indexOfNodes, 1)

                node
                    .data(graph.nodes, d => d.id)
                    .exit()
                    .remove()

                simulation.nodes(graph.nodes);
                simulation.force("link").links(graph.links);

                //reheat the simulation
                simulation.alpha(0.3).restart()

            }


        }



        function ticked() {
            // update link positions
            link
                .attr("x1", function (d) {
                    return d.source.x;
                })
                .attr("y1", function (d) {
                    return d.source.y;
                })
                .attr("x2", function (d) {
                    return d.target.x;
                })
                .attr("y2", function (d) {
                    return d.target.y;
                });

            // update node positions
            node
                .attr("transform", function (d) {
                    return "translate(" + d.x + ", " + d.y + ")";
                });

        }

        

        
        function dragStarted(event, d) {
            if (!event.active) simulation.alphaTarget(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;
        }
        
        function dragged(event, d) {
            d.fx = event.x;
            d.fy = event.y;
        }
        
        function dragEnded(event, d) {
            if (!event.active) simulation.alphaTarget(0);
            d.fx = undefined;
            d.fy = undefined;
        }
        
        </script>
</body>

</html>

最佳答案

删除节点时，不会更新节点选择对象。

要更新它，您应该更改:

node
    .data(graph.nodes, d => d.id)
    .exit()
    .remove()

类似于:

// no need to merge with enter, since you're only removing data
node = node
    .data(graph.nodes, d => d.id);
node.exit()
    .remove();

或者，使用 selection.join 的推荐做法:

node = node
    .data(graph.nodes, d => d.id)
    .join();

发生了什么

当你删除一个元素时，如果你不更新 node 到新的选择，你的选择就会有一个额外的元素(指向一个分离的 DOM 节点)。然后当你添加一个新的节点时，这段代码

node = nodesContainer.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    //
    .merge(node);

正在尝试合并两个相同大小的选择。来自 .enter() 的新选择具有用于所有节点的空槽，除了最后一个元素(例如，如果您要将另一个节点添加到 9 个已经存在的节点，。 enter() 将返回大小为 10 的选择，但前 9 个为空)。旧选择 node 已填充所有槽，尽管其中一个槽指向一个分离的 DOM 节点。因为它们的大小相同，并且只有在插槽为空时才会将元素合并到新选择中，所以不会合并旧选择的最后一个元素。如果它不是已删除的节点，则它不再在选择中，也不会更新。

同时更新`链接`

正如评论中所指出的，还有一个错误，如果您删除同一链中的连续节点，它会显示警报。这同样是由于没有更新链接选择对象，它使用过时的数据来检查是否可以删除节点。

要更新link，您应该更改:

linksContainer.selectAll(".link")
    .data(graph.links)
    .exit()
    .remove()

类似于:

link = linksContainer.selectAll(".link")
    .data(graph.links)
    .join()

此外:

您表示您还想更好地了解更新过程。您的代码暗示您可能不太了解其中的细微差别，尤其是在添加新节点时。

使用 node.append，将一个节点附加到选择中的每个组，甚至是已经添加的旧组。您可以通过查看 DOM 检查器来验证这一点，添加几个节点后，每个节点上都有多个 circle 和 text 子元素。相反，您应该只将它们附加到新节点。

它看起来像这样:

var newNodes = nodesContainer.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    // ...

newNodes.append("circle")
    // ...

node = newNodes.merge(node);

此外，您使用 .merge(node) 结束一些链，这会创建一个新的选择，它会尝试组合新添加的元素(circle 或 texts) 及其父元素，如果您不使用它或将其分配给任何东西，则不会执行任何操作。尽管您可能只想了解更新的 .join，但您可能想了解 .merge 的作用及其含义。方法代替。

一起:

var graph = {
    "nodes": [{
        "id": 0,
        "type": "Company",
        "name": "Company",
        "icon": "\uf1ad",
        "parent": 0
    },
    {
        "id": 1,
        "type": "Software",
        "name": "Software_1",
        "icon": "\uf7b1",
        "parent": 0
    },
    {
        "id": 2,
        "type": "Software",
        "name": "Software_2",
        "icon": "\uf78d",
        "parent": 0
    },
    {
        "id": 3,
        "type": "Software",
        "name": "Software_3",
        "icon": "\ue084",
        "parent": 0
    },
    {
        "id": 4,
        "type": "Software",
        "name": "Software_4",
        "icon": "\ue084",
        "parent": 0
    },
    {
        "id": 5,
        "type": "Software",
        "name": "Software_5",
        "icon": "\ue084",
        "parent": 3
    },
    {
        "id": 6,
        "type": "Software",
        "name": "Software_6",
        "icon": "\ue084",
        "parent": 3
    },
    {
        "id": 7,
        "type": "Software",
        "name": "Software_7",
        "icon": "\ue084",
        "parent": 4
    },
    {
        "id": 8,
        "type": "Software",
        "name": "Software_8",
        "icon": "\ue084",
        "parent": 4
    }
    ],
    "links": [{
        "source": 1,
        "target": 0,
        "type": "uses"
    },
    {
        "source": 2,
        "target": 0,
        "type": "uses"
    },
    {
        "source": 3,
        "target": 0,
        "type": "uses"
    },
    {
        "source": 4,
        "target": 0,
        "type": "uses"
    },
    {
        "source": 5,
        "target": 3,
        "type": "uses"
    },
    {
        "source": 6,
        "target": 3,
        "type": "uses"
    },
    {
        "source": 7,
        "target": 4,
        "type": "uses"
    },
    {
        "source": 8,
        "target": 4,
        "type": "uses"
    }
    ]
}

// declare initial variables
var svg = d3.select("svg")
width = window.innerWidth
height = window.innerHeight
node = null
link = null
thisNode = null;
d = null;
isParent = false;

// define cavnas area to draw everything
svg = d3.select("svg")
    .attr("class", "canvas")
    .attr("width", width)
    .attr("height", height)
    .call(d3.zoom().on("zoom", function (event) {
        svg.attr("transform", event.transform)
    }))
    .append("g")

// remove zoom on dblclick listener
d3.select("svg").on("dblclick.zoom", null)

// append markers to svg
svg.append('defs').append('marker')
    .attrs({
        'id': 'arrowhead',
        'viewBox': '-0 -5 10 10',
        'refX': 14,
        'refY': 0,
        'orient': 'auto',
        'markerWidth': 30,
        'markerHeight': 30,
        'xoverflow': 'visible'
    })
    .append('svg:path')
    .attr('d', 'M 0,-2 L 4 ,0 L 0,2')
    .attr('fill', 'black')
    .style('stroke', 'none');

var linksContainer = svg.append("g").attr("class", "linksContainer")
var nodesContainer = svg.append("g").attr("class", "nodesContainer")

// iniital force simulation
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function (d) {
        return d.id;
    }).distance(100))
    .force("charge", d3.forceManyBody().strength(-400))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("attraceForce", d3.forceManyBody().strength(70));

var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

//create links
link = linksContainer.selectAll(".link")
    .data(graph.links, d => d.id)
    .enter()
    .append("line")
    .attr("class", "link")
    .style("pointer-events", "none")
    .attr('marker-end', 'url(#arrowhead)')

node = nodesContainer.selectAll(".node")
    .data(graph.nodes, d => d.id)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("stroke", "white")
    .attr("stroke-width", "2px")
    .call(d3.drag()
    .on("start", dragStarted)
    .on("drag", dragged)
    .on("end", dragEnded)
    )
    

node.append("circle")
    .attr("r", 30)
    .style("fill", "whitesmoke")
    .on("mouseenter", mouseEnter)
    .on("mouseleave", mouseLeave)
    .on("contextmenu", contextMenu)

node.append("text")
    .style("class", "icon")
    .attr("font-family", "FontAwesome")
    .attr("dominant-baseline", "central")
    .attr("text-anchor", "middle")
    .attr("font-size", 30)
    .attr("fill", "black")
    .attr("stroke-width", "0px")
    .attr("pointer-events", "none")
    .text(function (d) {
        return d.id
    })

simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

simulation
    .force("link")
    .links(graph.links)

    function mouseEnter(event, d) {
    thisNode = d

    d3.select(this)
        .style("fill", "lightblue")
    tooltip.transition()
        .style("opacity", 1)
    tooltip.html(
        "ID: " + d.id + "<br/>" +
        "Name: " + d.name + "<br/>" +
        "Typ: " + d.type + "<br/>" +
        "Parent: " + d.parent)
        .style("left", (event.pageX) + 30 + "px")
        .style("top", (event.pageY - 80) + "px");
}

function mouseLeave(d) {
    switch (d.name) {
        case ("power-plug"):
            tooltip.transition()
                .style("opacity", 0);

            return
        default:
            d3.select(this).style("fill", "whitesmoke")

            tooltip.transition()
                .style("opacity", 0);

    }
}

function contextMenu(event, d) {
    thisNode = d

    tooltip.transition()
        .style("opacity", 0);

    event.preventDefault()

    var contextMenu = document.getElementById("context-menu")
    contextMenu.style.top = event.clientY + "px"
    contextMenu.style.left = event.clientX + "px"
    contextMenu.classList.add("active")

    window.addEventListener("click", function () {
        contextMenu.classList.remove("active")
    })

    document.getElementById("addObject").addEventListener("click", addNodeClicked)
    document.getElementById("removeObject").addEventListener("click", removeNodeClicked)
}

function addNodeClicked() {

    addNode(thisNode)
}

function addNode(d) {
    var newID = Math.floor(Math.random()*100000)

    graph.nodes.push({
        "id": newID,
        "type": "software",
        "name": "Software_" + newID,
        "icon": "\ue084",
        "parent": d.id,
    })

    graph.links.push({
        source: newID,
        target: d.id,
        type: "uses"
    })

    link = linksContainer.selectAll(".link")
        .data(graph.links)
        .enter()
        .append("line")
        .attr("class", "link")
        .style("pointer-events", "none")
        .attr('marker-end', 'url(#arrowhead)')
        .style("display", "block")
        .merge(link)

    var newNodes = nodesContainer.selectAll(".node")
        .data(graph.nodes)
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("stroke", "white")
        .attr("stroke-width", "2px")
        .call(d3.drag()
            .on("start", dragStarted)
            .on("drag", dragged)
            .on("end", dragEnded)
        )
        
    newNodes.append("circle")
        .attr("r", 30)
        .style("fill", "whitesmoke")
        .on("click", addNodeClicked)
        .on("mouseenter", mouseEnter)
        .on("mouseleave", mouseLeave)
        .on("contextmenu", contextMenu);

    newNodes.append("text")
        .style("class", "icon")
        .attr("font-family", "FontAwesome")
        .attr("dominant-baseline", "central")
        .attr("text-anchor", "middle")
        .attr("font-size", 30)
        .attr("fill", "black")
        .attr("stroke-width", "0px")
        .attr("pointer-events", "none")
        .text(function (d) {
            return d.id
        });

    node = newNodes.merge(node)


    simulation.nodes(graph.nodes);
    simulation.force("link").links(graph.links);

    //reheat the simulation
    simulation.alpha(0.3).restart()
    
    /*
    
    console.log("addNode: ")
    console.log(graph.nodes)
    console.log("---------")
    
    console.log("addLink: ")
    console.log(graph.links)
    console.log("---------")
    */
}

function removeNodeClicked() {
    removeNode(thisNode)
}

function removeNode(d) {
    var hasNeighborNodes = false

    link.filter((l) => {
        if (d.id == l.target.id) {
            hasNeighborNodes = true
        }

    })

    if (hasNeighborNodes) {
        alert("Object can´t be deleted, beause of incoming connections. Please re-arrange or delete incoming connections first.")
        hasNeighborNodes = false

    } else if (!hasNeighborNodes) {


        var indexOfNodes = graph.nodes.indexOf(d)

        var indexOfLinks = graph.links.findIndex(element => element.source.id == d.id)
        
        graph.links.splice(indexOfLinks, 1)
        
        link = linksContainer.selectAll(".link")
          .data(graph.links)
          .join();
        

        graph.nodes.splice(indexOfNodes, 1)

        node = node
            .data(graph.nodes, d => d.id)
        node.exit()
            .remove()

        simulation.nodes(graph.nodes);
        simulation.force("link").links(graph.links);

        //reheat the simulation
        simulation.alpha(0.3).restart()

    }


}



function ticked() {
    // update link positions
    link
        .attr("x1", function (d) {
            return d.source.x;
        })
        .attr("y1", function (d) {
            return d.source.y;
        })
        .attr("x2", function (d) {
            return d.target.x;
        })
        .attr("y2", function (d) {
            return d.target.y;
        });

    // update node positions
    node
        .attr("transform", function (d) {
            return "translate(" + d.x + ", " + d.y + ")";
        });

}




function dragStarted(event, d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
}

function dragged(event, d) {
    d.fx = event.x;
    d.fy = event.y;
}

function dragEnded(event, d) {
    if (!event.active) simulation.alphaTarget(0);
    d.fx = undefined;
    d.fy = undefined;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Playground D3v6</title>
    <!-- favcon -->
    <link rel="icon" href="https://networkrepository.com/favicon.png">
    <!-- call external d3.js framework -->
    <script src="https://d3js.org/d3.v6.js"></script>
    <!-- import multiselection framework -->
    <script src="https://d3js.org/d3-selection-multi.v1.js"></script>
    <!-- import "font awesome" stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>

<style>
    body {
        overflow: hidden;
        margin: 0px;
    }

    .canvas {
        background-color: rgb(220, 220, 220);
    }

    .link {
        stroke: rgb(0, 0, 0);
        stroke-width: 1px;
    }

    circle {
        background-color: whitesmoke;
    }

    .tooltip {
        font-family: "Open Sans", sans-serif;
        position: absolute;
        text-align: left;
        background: rgb(245, 245, 245);
        border: 2px;
        border-radius: 6px;
        border-color: rgb(255, 255, 255);
        border-style: solid;
        pointer-events: none;
        line-height: 150%;
        padding: 8px 10px;
    }

    #context-menu {
        font-family: "Open Sans", sans-serif;
        position: fixed;
        z-index: 10000;
        width: 190px;
        background: whitesmoke;
        border: 2px;
        border-radius: 6px;
        border-color: white;
        border-style: solid;
        transform: scale(0);
        transform-origin: top left;
    }

    #context-menu.active {
        transform: scale(1);
        transition: transform 200ms ease-in-out;
    }

    #context-menu .item {
        padding: 8px 10px;
        font-size: 15px;
        color: black;
    }

    #context-menu .item i {
        display: inline-block;
        margin-right: 5px;
    }

    #context-menu hr {
        margin: 5px 0px;
        border-color: whitesmoke;
    }

    #context-menu .item:hover {
        background: lightblue;
    }

</style>

<body>
    <!-- right click context menu -->
    <div id="context-menu">
        <div id="addObject" class="item">
            <i class="fa fa-plus-circle"></i> Add Node
        </div>
        <div id="removeObject" class="item">
            <i class="fa fa-minus-circle"></i> Remove Node
        </div>
    </div>

    <svg id="svg"> </svg>
</body>

</html>

关于javascript - D3 链接在特殊删除情况下中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66330137/

文章推荐： PostgreSQL:如何更改 log_min_duration_statement 以使更改生效？

文章推荐： phpstorm - 如何告诉 PhpStorm 函数参数是文件路径

javascript - “赞”按钮，在我的个人资料中发布时，描述将替换为“链接”“链接”“链接”
我有一个网站，并且我使用 javascript sdk 添加了“点赞”按钮。这是代码 (function(d, s, id) { var js, fjs = d.g
JavaScript 链接 VS CSS 链接
我知道 HTML 是逐行读取的。当您链接多个 css 文件(如规范化文件和样式表文件)时，由于 CSS 重要性特异性和源顺序，样式表文件应链接在规范化文件之后。看起来这不会影响链接的 JavaScri
css - 最常用的 Bootstrap CDN 链接/链接？
我正在使用官方 Bootstrap site 提供的 CDN 链接在我的网络应用程序中使用面板进行测试在彻底检查我的代码后，面板没有显示。但是我在 SO 上看到了类似的帖子并且 CDN 链接不同
html - 我的媒体查询不起作用。包括元标记；链接 rel 链接
这里是编码初学者。我正在尝试为我的移动设备网站设置断点，以便我的网站适合小屏幕。我只是想检查如果我缩小视口(viewport)的宽度，背景颜色是否会改变，但没有发生任何变化。也许我只是对一个简单的错误
javascript - JS - 对于字符串中具有特定 URL 的每个 anchor 链接，用其文本替换 anchor 链接
举一个我想要的例子，想象一下这个字符串: $text = 'lorem ipsum About us lorem ipsum'; 如果此字符串包含一个 href 以 / 开头的 anchor 链接，则
latex 链接
如何链接到 LaTeX 文档的另一部分或子部分？这种链接的常规范式是什么，像[链接名称]那样写，或者像网页超链接那样写？最佳答案链接到另一个部分需要您的部分进行一些额外的标记。要使用的命令是: \
MySQL 链接 WHERE IN
我有一个订单表，其中包含订单号、客户 ID 和代理 ID。然后有一个带有 id 的客户表和一个带有 id 的代理表。我需要获取所有具有来自代理 ID 'a03' 和代理 ID 'a05' 的订单的客
Python 链接
假设我有: dic = {"z":"zv", "a":"av"} ## Why doesn't the following return a sorted list of keys? keys = d
链接&编译后C执行错误
我在尝试链接到外部库时得到了一些奇怪的结果。如果我从命令行运行以下命令: gcc fftwTest.c -I../extlib/fftw-3.3.5-dll32 -L../extlib/fftw-3.
jQuery 链接
我认为我没有正确理解 jQuery 链接。我正在遍历一个数组并尝试将 div 元素添加到我的包装器 CSS 类中，每个 div 元素都有一个“click”类和自定义 css top 和 left 属性
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 HTML 超链接（链接） HTML使用标签 a 来设置超文本链接。超链
底部和顶部页面的 HTML 链接
这个问题在这里已经有了答案: How do I link to part of a page? (hash?) (7 个答案) Scroll Automatically to the Bottom
Docker Swarm 链接
我想创建一个 Docker Swarm 集群，运行一个 Elasticsearch 实例、一个 MongoDB 实例和一个 grails 应用程序，每个都在单独的机器上。我正在使用 Docker Ma
CakePHP HTML 链接
我正在尝试将 CakePHP HTML Linker 用于以下代码 Add Cuisine 由于 span 标签需要在 a 标签内。我无法根据需要获得输出。关于如何完成它的任何建议？最佳答案禁用链
button - 免费应用程序中的捐赠按钮/链接
大家好，我最近开发了一个应用程序，很快就会提交到 App Store。我想免费提交这个应用程序，并想知道我是否可以实现一个带有 PayPal 捐赠标志的按钮，上面基本上写着“捐赠用于开发”或与此相关
d - 链接 libuv
我想尝试在 dlang 中使用 libuv。我下载了这样的 dlang 绑定(bind): git clone git@github.com:tamediadigital/libuv.git 现在我接
根据参数查看的 drupal 链接
我有一个节点(节点 a)，各种其他节点(节点 b/c/d/e)与之引用。我可以创建一个带有参数的 View 作为我正在查看的节点(节点 a)，并获取引用该节点的节点列表。基本上在节点 a 查看节点
同一页面中的 CakePHP 链接
我正在尝试建立一个常见问题页面，上面有目录，下面有答案。我想点击目录中的一个问题，并在同一页面上链接到相应的答案。我如何在 CakePHP 中使用 $this->Html->link() 执行此操作方
php - 在可变的单一产品页面中自定义添加到购物车按钮/链接
在 WooCommerce 3.0+ 中，我使用 js 创建了一些选项卡，每个选项卡中包含来自不同类别的产品。我已经设法修改了简单产品的添加到购物车链接，其中点击了 addtocart 按钮它进入下一
delphi - 是否可以包含基于组件属性的文件(链接)？
Delphi 2007/2009 奇怪的问题在这里: 根据设计时定义的组件属性，是否可以在链接中包含文件或保留文件？示例:如果我将 SomeProperty 保留为真，则在编译时，单元 SomeUn

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城