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

Question

我构建了一个改编自 this example 的 d3 sankey 图，以显示我的程序中课程的先决条件流程。但是，我没有让库自动定位节点，而是手动设置了它们的 x 和 y 坐标，以在调用 update();[=19 之前尽量减少与这段代码的交叉=]

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

如果我是对的，那是因为数组中的数据顺序与它们的位置顺序不匹配。数组顺序似乎决定了依赖项的显示顺序，除非您重新定位任何元素，这会导致重新渲染。

我已经尝试重新排序数据数组的一些元素，以遵循图表上的位置，并且它们的大小和它们之间的依赖关系链接自动呈现良好。

我还注意到，有些元素虽然列在数组中，但没有显示在图表中，因为它们没有添加任何依赖项。

Answer 2

一个解决方案是制作这样的超时函数：

  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

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

Why does this d3 chart render with crosses, then get rid of them upon moving a node?

javascript

charts

data-visualization

d3.js

sankey-diagram