Draw parallel edges in jsnetworkx

Question

I have a multigraph, and I would like to be able to see each edge that goes from one vertex to another clearly. For example, when I have a graph with 2 vertices, and 3 edges going from the first to the second, but i only see one edge. I'm using the jsnetworkx api

var G = new jsnx.MultiGraph();
        G.addNodesFrom([0,1]);
        G.addEdgesFrom([[0,1],[0,1],[0,1]]);
        var color = d3.scale.category20();
        jsnx.draw(G, {
            element: '#canvas',
            layoutAttr: {
                charge: -120,
                linkDistance: 100
            },
            nodeAttr: {
                r: 10,
                title: function(d) { return d.label;}
            },
            nodeStyle: {
                fill: function(d) {
                return color(d.data.group);
                },
                stroke: 'none'
            },
            edgeStyle: {
                fill: '#999',
                'stroke-width':10
            },
            stickyDrag: true
        });

This is what i get as a result : Two node example network

Thanks for any help !

Answer 1

JSNetworkX > jsnx.draw(...) offers a (descriptive) API implemented by some d3.js coding ...

• but I think there is no appropriate JSNetworkX API solution for your "parallel edges" problem.

You have to do the drawing by yourself, ie by implementing draw(G) per d3js code ...

See:

https://bl.ocks.org/emeeks/raw/aaa995cde6621745e906/

by E.Meeks for further "drawing edges" investigations, especially the "offset edge type" ...