Question 199651 in Javascript Question posted in
A very good W3school tutorial can be found here.

Directional network graph in javascript

Is there a way to create a directional network graph using d3js or highcharts .I was able to create a unidirectional network graph on high chart .

What I have with my highchart code is

enter image description here

What I need is

enter image description here

I am not sure if this is possible with highchart or d3js ,I searched through their library but couldn’t find way to add directional arrows . Anyone if has worked on it can please advice . I cant use neo4j because my Backend DB is elasticsearch and I can’t use neo4J .

Tags:

2

Answers


  1. 0

    I suppose the easiest thing to do would be to use d3-graphviz.

    let dotSource = `digraph{
  node [
    style=filled;
  ]
  A [fillcolor=red; fontcolor=black];
  B [fillcolor=green; fontcolor=white];
  C [fillcolor=black; fontcolor=white];
  D [fillcolor=orange; fontcolor=white];
  A -> B;
  B -> C;
  B -> D
}`
d3.select("#graph").graphviz()
    .engine('neato')
    .renderDot(dotSource);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-graphviz/5.0.2/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>

    There are a ton of options to lay out and/or style the graph.

    Login or Signup to reply.
  2. 0

    It’s possible with Highcharts but requires some customization. You can for example wrap the getLinkPath method and generate a path with an arrow.

    (function(H) {
  H.wrap(H.seriesTypes.networkgraph.prototype.pointClass.prototype, 'getLinkPath', function(proceed) {
    return [...] // path;
  });
}(Highcharts));

    Example: https://jsfiddle.net/BlackLabel/pk8y49qw/

    Or add an arrow to already existing paths.

    Example: https://jsfiddle.net/BlackLabel/vk81xbn3/

    Useful threads:

    Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search