6


D3js でノードの追加と削除 を既に行っていますが、問題は解決しません。

最初はいくつかのノードがあり、ノードを動的に追加したいのですが、ノードが既に存在する場合はそのノードを更新し、複製しないでください。

現在、既存のものを更新せずに複製を作成しています。
ここにメインコードと完全なコードがあり、作業フィドルはここにあります

//handles node elements
var circles = svg.selectAll('g');


//update graph (called when needed)
function restart() {

/***************************************
    Draw circles (nodes)
****************************************/


circles = circles.data(data.nodes);

var g = circles.enter()
               .append("g")
               .attr("class", "gNode")
               .attr("cursor", "pointer")
               .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
               .call(force.drag);



g.append("circle")                      
.attr({
     "class": "node", 
     "cx": function(d) { return rScale(d.NumOccurrences); },
     "cy": function(d) { return rScale(d.NumOccurrences); },
     "r": function(d) { return rScale(d.NumOccurrences); }
 })             
 .style("fill", function(d, i) { return colors(i); })
 .style("stroke", "#000");



 g.append("text")
.attr({
    "x": function(d) { return rScale(d.NumOccurrences); },
    "y": function(d) { return rScale(d.NumOccurrences); },
    "font-family": "sans-serif",
    "font-size": "20px",
    "fill": "black",
    "text-anchor": "middle"
   })
   .text( function (d) { return d.name; });

   g.append("title")        
    .text(function(d) { return d.name; });

 // remove old nodes
 circles.exit().remove();

 // set the graph in motion
 force.start();
 }

// app starts here
restart();


 function dynamicAddNodes() {

var updatedata = {"name":"ios","NumOccurrences":"500","color":"green","x":0,"y":1}

data.nodes.push(updatedata);    

restart();
 }

 setInterval(dynamicAddNodes, 10000);
4

2 に答える 2

1

問題はノードの更新プロセスではなく、ノードを更新するデータです。

実行するrestart()と、データからノードが削除されるのではなく、ノードが追加されるだけです。データが削除されることはないため、ノードが削除されることはありません。関数が呼び出されるたびに、新しいデータ ノードが追加され、そのデータ ノードに対応する新しい円が追加されます。

この動作を示すために、ここで例を更新しました。データを変更するたびに、データからエントリを削除し、新しいデータ ポイントに置き換えます。

于 2013-07-15T14:55:22.750 に答える