Search code examples
javascriptd3.jshighcharts

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 .

Solution

  • 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