为什么我的更新功能会创建一个全新的力导向图?

时间:2012-10-25 21:11:19

标签: d3.js force-layout directed-graph

我正在查看该问题中提供的this other questionthis 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 个答案:

答案 0 :(得分:1)

我一发布问题就明白了......

这是因为我svg.append("svg:g")pathcircle text

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