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

【问题标题】：Maintaining relative ordering when adding nodes to a layered graph in Dagre在 Dagre 中向分层图中添加节点时保持相对顺序
【发布时间】：2014-11-17 11:11:55
【问题描述】：

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

【问题讨论】：

标签： javascript d3.js graph-drawing dagre-d3

【解决方案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/

【讨论】：