1

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

在此处输入图像描述

我尝试改变不同options但无法实现它。

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

提前致谢。

参考文档中的示例。

这是代码示例。

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

1 回答 1

2

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

定向遵循边的往返数据。A --> B 所以 B 比 A 低一个级别。

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

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

https://jsfiddle.net/whhqka68/

于 2018-02-25T23:32:42.120 回答