4

我创建了一个简单的 Dagre 示例，以在单击图中的现有节点时动态添加节点。但是，重新渲染会在同一层内创建不同的相对顺序。反正有这个问题吗？

小提琴在这里可用：http: //jsfiddle.net/gke2dann/

提前致谢。

// Create a new directed graph
var g = new dagreD3.Digraph();

/* populate graph... see fiddle */

var renderer = new dagreD3.Renderer();
var layout = dagre.layout();

var render = function() {
    layout.run(g);
    renderer.run(g, d3.select("svg g"));
};

render();

svg.onclick = function(evt) {
    var nodeId = evt.target.__data__;
    for (var i = 0; i <= Math.random() * 10; ++i) {
        var newNodeId = nodeId + "_sub" + i;
        g.addNode(newNodeId, { label: "Bla" });
        g.addEdge(null, newNodeId, nodeId);
    }
    render();
};

PS：另外，有没有办法让图形更新使用那些花哨的 d3 转换？

4

1 回答 1

2

我找到了解决我的两个问题的方法。通过减少用于最小化边缘交叉数量的迭代量，排序保持一致和确定性（但在所有情况下当然不是理想的）。可以通过渲染器上的指定功能轻松启用过渡。

var renderer = new dagreD3.Renderer();
// Disable the edge crossing minimization ordering
renderer.layout(dagre.layout().orderIters(-1));
// Enable a transition
renderer.transition(function(selection) {
    return selection.transition().duration(500);
});

Dagre 真的是一个很棒的图书馆。更新小提琴供您欣赏：http: //jsfiddle.net/gke2dann/1/

于 2014-09-24T11:56:21.323 回答