D3過時的鏈接仍然可見

我得到了什么：

我得到了一個D3強迫圖，有兩種不同的鏈接型別。我確實以不同的方式來看待這兩種型別。need是一條簡單的線，uses是虛線。為了做到這一點，我為鏈接設定了兩個不同的CSS類，并在點擊時簡單地切換型別。為了最終實作這一變化，我再次呼叫主initialize()函式。

問題出在哪里：

只要我點擊其中一個鏈接并切換型別，過時的線條仍然可見。我不知道如何避免這種行為？我怎樣才能確保過期的線條消失？我感謝任何提示。

更新：

我在重新啟動前添加了svg.selectAll("line").remove()。但我懷疑這是最好的做法，因為有時線條會完全消失。

 var graph = {
            "nodes": [
                {
                    "id": 1。
                },
                {
                    "id": 2 
                },
                {
                    "id": 3
                
            ],
            "鏈接": [
                {
                    "source": 1,
                    "目標": 2,
                    "type": "用途"。
                },
                {
                    "source": 2,
                    "目標": 3,
                    "type": "需求"。
                },
                {
                    "來源": 3,
                    "目標": 1,
                    "type": "需求", "型別".
                }

            ]
        }

        var svg = d3.select("svg"/span>)
            .attr("width" , window.innerWidth)
            .attr("height"，window.innerHeight)

        var force = d3.forceSimulation()
            .force("link", d3.forceLink() 。 id(function (d) {
                returnd.id
            }).distance(80)
            .force("charge", d3.forceManyBody().strength(-100)
            .force("center", d3.forceCenter(window. innerWidth / 2, window.innerHeight / 2)
            .force("collision", d3.forceCollide().radius(90)

        initialize()

        function initialize（） {

            link = svg.selectAll(".link"/span>)
                .data(graph.links)
                .join("line"/span>)
                //.attr("class", "link")。
                .attr("class", function (d) {
                    if (d.type == "uses") {
                        return "uses"
                    } else {
                        return "needs" {
                    }
                })
                .on("dblclick", function (event, d) {
                    if (d.type == "uses") {
                        d.type = "needs"> else if (d.type == "needs") {
                        d.type = "uses" selectAll("line").remove()
                    initialize()
                })
    
            node = svg.selectAll(" .node")
                .data(graph.nodes, d =>  d.id)
                .join("g"/span>)
                .attr("class"/span>, "node")
                .call(d3.drag()
                    .on("start"/span>, dragStarted)
                    .on("drag", dragged)
                    .on("end", dragEnded)
                )

            node.selectAll("circle")
                .data(graph.nodes)
                .join("circle")
                .attr("r"/span>, 30)
                .style("fill", "whitesmoke")

            力量
                .nodes(graph.nodes)
                .on("tick", ticked)。

            迫使
                .force("link")
                .links(graph.links)
        }

        function ticked（） {
            //>更新鏈接位置。
            鏈接
                .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;
                });

            //更新節點位置 //更新節點位置。
            節點
                .attr("transform", function(d) {
                    return "translate("   d. x   ", "   d.y   "）"/span>。
                });
        }

        function dragStarted(event, d) {
            if (!event.active) force.alphaTarget（0.3）.restart（）。
            d.fx = d.x;
            d.fy = d.y;

            PosX = d.x; x
            PosY = d.y
        }

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

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

 body {
        height: 100%;
        background: #e6e7ee;
        overflow: hidden;
        margin: 0px;
    }

    line {
        stroke-width: 6px;
    }
    
    line.uses {
        行程：灰色。
        stroke-dasharray: 5;
    }

    line.needs {
        筆畫：黑色。
    }

    line:hover {
        筆觸: 金色。
    }

<!DOCTYPE html>
<html> 

<head> 
    <meta charset="utf-8">/span>
    < meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- d3.js框架-->
    <script src="https://d3js. org/d3.v6.js"></script>
    
</head> 

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

</html>/span>

uj5u.com熱心網友回復：

在段中：

 link = svg.selectAll(".link")
            .data(graph.links)
            .join("line"/span>)
            //.attr("class", "link")。
            .attr("class", function (d) {
                if (d.type == "uses") {
                    return "uses"
                } else {
                    return "needs" {
                }
            })

選擇器正在選擇link類，但這些行實際上有uses或needs。你可以改為選擇前面的uses和needs：

link = svg.selectAll("line.uses,line.needs")

這將使.join()洗掉這些類中未使用的行。

標籤：

上一篇：SparkScalaUDFNullPointer例外

下一篇：如何在Javascript中，當用戶選擇另一個陣列的值時，從一個陣列中回傳數值