Почему эта диаграмма d3 визуализируется с помощью крестов, а затем избавляется от них при перемещении узла?

Question

Я построил диаграмму d3 sankey, адаптированную из this example, чтобы показать поток предпосылок для курсов в моей программе. Однако, вместо того, чтобы позволить библиотеке Auto-позиционные узлы, я вручную установить их x и y координаты минимизируют крестов с этой короткой кусочке кода перед вызовом update();

if (!AUTO_POSITION) { 
    exampleNodes.forEach((r, i) => { 
     r.x = r.xPos; 
     r.y = r.yPos; 
    }); 
} 

Диаграмма первоначально визуализирует как это (примечание линия пересекает около МАТЕМАТИКА 100, МАТЕМАТИКА 101, 101, PHYS PHYS 102, ELEC 211, ELEC 311 и т.д.):

Однако при нажатии и перетащить любой один узел, схема подстраивается это (обратите внимание, что большинство крестов исчезает):

Почему программа это сделать? И как я могу получить диаграмму для рендеринга без крестов при загрузке?

Я попытался взломать события щелчка узла и перетащить его при загрузке, но есть немного задержки и требуется, чтобы мышь была переведена на работу. Кроме того, я использовал бы это только как временное решение последней меры.

var evt = document.createEvent("MouseEvents"); 
evt.initEvent("mouseup", true, true); 
evt.initEvent("mousedown", true, true); 
document.querySelector("g.node").dispatchEvent(evt); 

Полный код для моего примера в этом JSFiddle. Благодарю.

Answer 1

Одно решение было бы сделать функцию тайм-аут, как это:

setTimeout(function() { 
    //does the relayout 
    biHiSankey.relayout(); 
    //update all the nodes with new height 
    svg.selectAll(".node").selectAll("rect").attr("height", 
    function (d) { 
     return d.height; 
    }); 
    //update all the path 
    link.attr("d", path); 
    }, TRANSITION_DURATION +450); 

Внутри функции update.

Это будет активировано после завершения перехода.

Рабочий код here

Answer 2

Если я прав, это потому, что порядок данных в вашем массиве не соответствует порядку их положения. Кажется, что порядок массива определяет, в каком порядке показаны зависимости, если вы не измените какой-либо из элементов, что приведет к реинжинирингу.

Я попытался переупорядочить некоторые элементы массива данных, чтобы следить за позициями на диаграмме, а их размер и взаимозависимость между ними автоматически отображаются отлично.

Я также заметил, что некоторые элементы, хотя и указаны в массиве, не отображаются на диаграмме, так как у них нет добавленных зависимостей.