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 に答える