在 Dagre 中向分层图中添加节点时保持相对顺序

Question

我创建了一个简单的 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 转换？

Answer 1

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

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/