为啥我的更新函数会创建一个全新的力导向图？

Posted 2023-02-22

【中文标题】为啥我的更新函数会创建一个全新的力导向图？

【英文标题】：Why is my update function creating an entirely new force-directed graph?为什么我的更新函数会创建一个全新的力导向图？

【发布时间】：2012-10-16 03:42:09

【问题描述】：

我正在查看该问题中提供的 this other question 和 this example，但我无法让自己的更新功能正常工作：

update = function() 
    path = svg.append("svg:g").selectAll("path")
        .data(force.links());
    path.enter().append("svg:path")
        .attr("class", "link")
        .attr("fill", "none")
        .attr("stroke", "#666")
        .attr("stroke-width",
              function(d) 
                  return (Math.floor(Math.log(d.value - min_val) / Math.log(2)) + 1) + "px"
              )
        .attr("marker-end", "url(#generic_arrow_marker)")
        .on("mouseover",
            function(d, i) 
                if(d3.select(this).attr("stroke") != "#666") 
                    mousedOut = false;
                
            )
        .on("mouseout",
            function(d, i) 
                if(d3.select(this).attr("stroke") != "#666") 
                    mousedOut = true;
                    restoreGraph();
                
            );
    path.exit().remove();
    circle = svg.append("svg:g").selectAll("circle")
        .data(force.nodes());
    circle.enter().append("svg:circle")
        .attr("r",
              function(d) 
                  return (20 + Math.floor(Math.log(d.pagerank) / Math.log(2)) * 2) + "px"
              )
        .attr("fill", "#ccc")
        .attr("stroke", "#333")
        .attr("stroke-width", "1.5px")
        .on("mouseover", // select relevant data nodes on click
            function(d, i) 
                mousedOut = false;
                d3.select(this).attr("class", "selected");
                transitions(d);
                $("span#user").text(d.name)
                $("span#pagerank").text(d.pagerank)
            )
        .on("click",
            function(d, i) 
                incoming = !incoming;
                transitions(d);
            )
        .on("mouseout",
            function(d, i) 
                mousedOut = true;
                d3.select(this).attr("class", "");
                restoreGraph();
            )
        .call(force.drag);
    circle.exit().remove();
    text = svg.append("svg:g").selectAll("g")
        .data(force.nodes());
    textEnter = text.enter().append("svg:g");
    textEnter.append("svg:text")
        .attr("x", 8)
        .attr("y", ".31em")
        .attr("class", "shadow")
        .text(function(d)  return d.name; )
    textEnter.append("svg:text")
        .attr("x", 8)
        .attr("y", ".31em")
        .text(function(d)  return d.name; )
    text.exit().remove();
    force.start();

每当我调用 update() 时，它都会创建现有 D3 图的全新副本，即使我没有进行任何更改。

关于我可能做错了什么的想法？

【参考方案1】：

我一发布问题就想通了...

这是因为我有svg.append("svg:g") 用于path、circle 和text。

我想我会留下这个问题，以防它帮助其他人......