javascript - 为什么这个 d3 图表呈现十字，然后在移动节点时摆脱它们？

Question

我构建了一个改编自 this example 的 d3 sankey 图显示我的程序中类(class)的先决条件流程。但是，我没有让库自动定位节点，而是手动设置它们的 x 和 y 坐标，以在调用 更新();

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

图表最初是这样呈现的(注意线在 MATH 100、MATH 101、PHYS 101、PHYS 102、ELEC 211、ELEC 311 等附近交叉):

但是，当您单击并拖动任何一个节点时，图表会对此进行调整(注意大多数十字会消失):

程序为什么要这样做？我怎样才能让图表在加载时不带叉号呈现？

我试过 hackily 触发节点在加载时被单击和拖动的事件，但是有一点延迟并且需要移动鼠标才能工作。此外，我只会将其用作最后的解决方法。

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