Question

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

提前致谢。

// 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);
});

达格尔真的是一个很棒的图书馆。您可以在此处更新小提琴：http://jsfiddle.net/gke2dann/1/

在Dagre中将节点添加到分层图时维护相对排序

1 个答案: