我一直在研究一种D3JS力布局图,但是并没有按预期工作。
我已将代码上传到JSFiddle,可以在这里看到:
http://jsfiddle.net/jonaths/e9L3aq4k/
我认为它的重要部分如下,它涉及更新节点/链接的阈值:
function threshold(thresh) {
graph.links.splice(0, graph.links.length);
for (var i = 0; i < graphRec.links.length; i++) {
if (graphRec.links[i].value > thresh) {
graph.links.push(graphRec.links[i]);
}
}
graph.nodes.splice(0, graph.nodes.length);
for (var j = 0; j < graphRec.nodes.length; j++) {
if (graphRec.nodes[j].value > thresh) {
graph.nodes.push(graphRec.nodes[j]);
}
}
restart();
}
//Restart the visualisation after any node and link changes
function restart() {
node = node.data(graph.nodes);
link = link.data(graph.links);
link.exit().remove();
node.exit().remove();
node.enter().insert("circle", ".node").attr("class", "node").attr("r", function (d) {
return d.value / 5
}).style("fill", "steelblue").call(force.drag);
link.enter().insert("line", ".node").attr("class", "link").call(force.drag);
force.start();
}
这个想法是,随着阈值的增加,删除了不符合该阈值的节点和链接。随后更新阈值时,应相应地添加/删除其他链接/节点。
我使用code here作为我尝试做的基础,但必须修改它以使节点消失,因此我的代码可能存在问题。
现在我发现,如果你慢慢增加门槛,那么它就能完美运作。但是,如果您只是将阈值单击为高值,然后再次更改它,则会出现一些奇怪的行为导致图表中断。您可能会注意到左上角收集了节点。在控制台中查看输出会显示以下错误消息:
未捕获的TypeError:无法读取未定义的属性'weight'
但我不能为我的生活找出原因,有时为什么会这样,但不是每次都有。我对D3很新,所以任何帮助&amp;建议将不胜感激,我希望我已经提供了所有必要的信息给某人给我一些指示。谢谢!
答案 0 :(得分:0)
如果在发生错误情况时检查数据,则在其中一个节点的链接中丢失source
引用(它未定义):
[Object]
0: Object
source: undefined
target: Object
value: 75
__proto__: Object
length: 1
__proto__: Array[0]
我不知道为什么,但我重写了你的阈值函数来处理d3
链接和节点对象(而不是回到源json)并且它的行为符合预期:
var masterNodes = graph.nodes;
var masterLinks = graph.links;
function threshold(thresh) {
graph.nodes = [];
masterNodes.forEach(function(d,i){
if (d.value > thresh){
graph.nodes.push(d);
}
});
graph.links = [];
masterLinks.forEach(function(d,i){
if (d.value > thresh){
graph.links.push(d);
}
});
restart();
}
更新了fiddle。