d3js强制布局不按预期工作

时间:2015-02-15 16:43:24

标签: javascript d3.js force-layout

我一直在研究一种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;建议将不胜感激,我希望我已经提供了所有必要的信息给某人给我一些指示。谢谢!

1 个答案:

答案 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