javascript - 如何在VIsJS Network中通过箭头方向更改节点位置

经过大量的搜索之后，我决定visjs将适合我的解决方案以开发网络图。我能够通过“分层布局水平”的“数据集”生成网络图。我在网络中有一个小问题，即我只希望所有边缘都在一个（向前）方向上。
 在此三角形左侧网络的屏幕快照中，我需要B，C和F节点：



我尝试更改其他options，但无法实现。

有没有人使用过这个库的网络图，请帮助我。

提前致谢。

Refrence Example in documentation。

这是代码示例。

const container = document.getElementById("mynetwork");

const nodes = new vis.DataSet([
    {
      id: 1,
      label: "A",
      color: {
        background: "rgb(76, 195, 217)",
        border: "rgb(255, 198, 93)"
      }
    },
    {
      id: 2,
      label: "B",
      color: {
        background: "rgb(147, 100, 14)",
        border: "rgb(123, 200, 164)"
      }
    },
    {
      id: 3,
      label: "C",
      color: {
        background: "rgb(76, 195, 217)",
        border: "rgb(241, 103, 69)"
      }
    },
    {
      id: 4,
      label: "D",
      shape: "triangle",
      size: 25,
      color: { background: "white", border: "rgb(64, 64, 64)" }
    },
    {
      id: 5,
      label: "E",
      color: {
        background: "rgb(238,238,238)",
        border: "rgb(241, 103, 69)"
      }
    },
    {
      id: 6,
      label: "F",
      color: {
        background: "rgb(147, 100, 14)",
        border: "rgb(123, 200, 164)"
      }
    },
    {
      id: 7,
      label: "G",
      shape: "triangle",
      size: 25,
      color: { background: "white", border: "rgb(64, 64, 64)" }
    },
    {
      id: 8,
      label: "H",
      color: { background: "rgb(238,238,238)", border: "rgb(64, 64, 64)" }
    }
]);

const edges = new vis.DataSet([
    { from: 1, to: 4, label: "70%" },
    { from: 3, to: 4 },
    { from: 2, to: 4 },
    { from: 4, to: 5 },
    { from: 6, to: 7 },
    { from: 5, to: 7 },
    { from: 7, to: 8, label: "50%" }
]);
const data = {
    nodes: nodes,
    edges: edges
};
const options = {
    nodes: {
      font: {
        size: 22
      },
      borderWidth: 3
    },
    edges: {
      font: {
        align: "top"
      },
      smooth: {
        type: "dynamic",
        forceDirection:
          directionInputValue === "UD" || directionInputValue === "DU"
            ? "vertical"
            : "horizontal",
        roundness: 0.0
      },
      arrows: {
        to: { enabled: true, scaleFactor: 1, type: "arrow" }
      }
    },
    layout: {
      hierarchical: {
        direction: directionInputValue
      }
    },
    interaction: {
      tooltipDelay: 200,
      hover: true
    },
    physics: {
      enabled: false
    }
};
const network = new vis.Network(container, data, options);

最佳答案

您需要将选项layout.hierarchical.sortMethod设置为directed才能正确计算级别：


  Directed遵守边缘数据的往返。 A-> B所以B是
  低于A的水平。
  
  http://visjs.org/docs/network/layout.html

layout: {
  hierarchical: {
    direction: "LR",
    sortMethod: "directed"
  }
}

https://jsfiddle.net/whhqka68/