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

Question

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

Fiddle 在这里可用: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 确实是一个很棒的图书馆。更新 fiddle 供您在这里享受:http://jsfiddle.net/gke2dann/1/