Javascript D3强制布局节点属性未正确更新
我有不同日期的网络数据,我将其绘制为每一天的力定向图。当我按下按钮时,网络将部分更新到第二天(删除剩余节点,绘制新节点)。除了一件事,一切都很好 对于每一天,我都会根据数据更新节点数组的某些属性(例如节点的度)。这也可以很好地工作,因为切换到第二天后,我只需查看节点数组,就可以看到属性已正确更新。但是命令Javascript D3强制布局节点属性未正确更新,javascript,d3.js,force-layout,Javascript,D3.js,Force Layout,我有不同日期的网络数据,我将其绘制为每一天的力定向图。当我按下按钮时,网络将部分更新到第二天(删除剩余节点,绘制新节点)。除了一件事,一切都很好 对于每一天,我都会根据数据更新节点数组的某些属性(例如节点的度)。这也可以很好地工作,因为切换到第二天后,我只需查看节点数组,就可以看到属性已正确更新。但是命令 `.append("circle").attr("r", function(d) { return 2*d.Degree+10; })` 不使用新属性执行,并且节点的半径不由图形显
`.append("circle").attr("r", function(d) { return 2*d.Degree+10; })`
不使用新属性执行,并且节点的半径不由图形显示日期的节点度表示
如何更新图形,以便使用度的新值定义节点的半径
这是我的函数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、update和exit上构建了一个JSFIDLE。在这里:
我希望这能有所帮助嘿,伙计,非常感谢你的快速回复。根据您的示例,我添加了:'var node_array=svg1.selectAll(“circle”).data(节点,函数(d){return d.id;});node_array.attr(“r”,函数(d){返回2*d.Degree+10;});'行之前:“nodeOP=nodeOP.data(节点,函数(d){return d.id;});”在我的启动函数中。现在,我看到未更新节点的大小正在改变,但仍然没有使它们响应分配给它们的属性。这对我来说很奇怪,因为当我在浏览器中查看nodeOP数组时,所有属性都定义正确。发现了我的错误!谢谢,老兄,周末愉快(你真的解决了这个问题,这很符合你的名字!)。堆栈溢出规则!