Поддержание относительного упорядочения при добавлении узлов в многоуровневый граф в 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 - действительно отличная библиотека. Обновленная скрипка для вашего удовольствия доступна здесь: http://jsfiddle.net/gke2dann/1/