javascript - 如何通过 VIsJS 网络中的箭头方向更改节点位置

Question

谷歌搜索了很多时间后我决定visjs将适合我开发网络图的解决方案。我能够通过 Hierarchical Layout Horizo​​ntal 生成带有 Dataset 的网络图。我在网络中有一个小问题，即我只希望所有边缘都在一个(向前)方向上。 在三 Angular 形左侧的网络截图中，我需要 B、C 和 F 节点:

我尝试更改不同的选项但无法实现。

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

提前致谢。

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);

Answer 1

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

Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.

http://visjs.org/docs/network/layout.html

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

https://jsfiddle.net/whhqka68/