2
我有不同日子的網絡數據,我繪製爲每天的力指向圖。當我按下按鈕時,網絡部分地被刪除(節點被刪除,新的節點被繪製)到第二天。除了一件事以外,一切工作都很好。D3強制佈局節點屬性沒有正確更新
對於每一個新的一天,我從我的數據(例如節點度)更新我的節點數組的一些屬性。這也可以正常工作,因爲當我切換到第二天後查看節點數組時,我可以看到屬性已被正確更新。然而,命令
`.append("circle").attr("r", function(d) { return 2*d.Degree+10; })`
不與新的屬性進行,並且節點的半徑不通過該節點的在日期的程度的圖表顯示代表。
如何更新我的圖形,使Degree的新值用於定義節點的半徑?
這裏是我的功能開始(),這是我操作我的數據後,調用繪製圖:
function start() {
var force = d3.layout.force()
.charge(-130)
.linkDistance(230)
.size([width, height]);
force.nodes(nodes)
.links(edges)
linkOP = linkOP.data(edges, function(d) { return d.source.id + "-" + d.target.id; });
linkOP.enter().insert("line", ".node1")
.attr("class", "link1")
.style("stroke-width", function(d) {
return 2*d.weight.weight;
});
linkOP.exit()
.remove();
nodeOP = nodeOP.data(nodes, function(d) { return d.id;});
nodeOP.enter()
.append("g")
.append("circle")
.attr("r", function(d) { return 2*d.Degree+10; })
.attr("class", "node")
.style("fill", function(d) { return color(d.bipartite); });
nodeOP.append("title").text(function(d) { return d.name; });
nodeOP.call(force.drag);
nodeOP.append("text")
.text(function(d) { return d.id; });
nodeOP.moveToFront();
nodeOP.exit().remove();
force.start();
clean();
force.on("tick", function() {
linkOP.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; });
nodeOP.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
nodeOP.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
}
我知道這是一個很簡單的問題......非常感謝你們的幫助!
嘿,男士,非常感謝您的快速回復。根據你的例子,我添加了:'var node_array = svg1.selectAll(「circle」)。data(nodes,function(d){return d.id;}); node_array.attr(「r」,function(d){return 2 * d.Degree + 10;});'在行之前:'nodeOP = nodeOP.data(nodes,function(d){return d.id;});'在我的啓動功能。現在我看到未更新的節點的大小正在改變,但仍然不是這樣,以致它們表示與它們相關的屬性。這對我來說很奇怪,因爲當我在瀏覽器中查看nodeOP數組時,所有屬性都被正確定義。 – Schaark
發現我的錯誤!非常感謝dawg,並且有一個愉快的週末(你真的殺了那個問題,這很適合你的名字!)。 Stackoverflow規則! – Schaark