How to change the nodes location by direction of arrow in VIsJS Network

Question

After googling lot of time I decided visjs will fit for my solution to develop network graph. I was able generate network graph with Dataset by Hierarchical Layout Horizontal. I have a small issue in network i.e i want all edges only in one(forward) direction. I needed B, C and F nodes in this screenshot of network left side of the triangle:

I tried changing different options but not able achieve it.

is there anybody have used this library for network graph, Please help me.

Thanks in advance.

Refrence Example in documentation.

Here is code sample.

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

You need to set the option layout.hierarchical.sortMethod to directed for the correct calculation of levels:

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/