我有不同日期的网络数据,我将其绘制为每一天的力导向图。当我按下按钮时,网络将部分更新(保留节点被删除,新节点被绘制)到第二天。除了一件事之外,一切都工作正常。
对于每一天,我都会根据数据更新节点数组的一些属性(例如节点的度数)。这也很好用,因为当我切换到第二天后查看节点数组时,我可以看到属性已正确更新。然而命令
`.append("circle").attr("r", function(d) { return 2*d.Degree+10; })`
未使用新属性进行处理,并且节点的半径不以图表显示日期时节点的度数表示。
如何更新我的图表,以便使用新的 Degree 值来定义节点的半径?
这是我的函数 start(),我在处理数据以绘制图表后调用它:
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 + ")";
});
});
}
我知道这是一个非常简单的问题...非常感谢您的帮助!
最佳答案
您的代码没有对半径进行更新。 .enter() 调用的所有内容仅适用于新项目。因为你只有一行
.append("circle").attr("r", function(d) { return 2*d.Degree+10; })`
在 .enter 内,该部分仅出现在新节点上。
我在输入、更新、退出上构建了一个jsfiddle。这里:http://jsfiddle.net/TheMcMurder/H3HTe/
希望有帮助
关于javascript - D3 强制布局节点属性未正确更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23836425/