fkling / JSNetworkX

Build, process and analyze graphs in JavaScript (port of NetworkX)
https://felix-kling.de/jsnetworkx/
Other
757 stars 185 forks source link

How can I visualize MultiGraph? #73

Open Lecanyu opened 6 years ago

Lecanyu commented 6 years ago

Hi,

I have tried to visualize simple graph. Everything looks good. However, how can I visualize multigraph?

Here is my sample code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
</head>
<body>
<div id="canvas"></div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/jsnetworkx.js"></script>

<script type="text/javascript">
    var G = new jsnx.MultiGraph();

    G.addNodesFrom([1,2,3]);
    G.addEdgesFrom([[1,3],[1,3],[1,2],[1,2],[2,3],[2,3]]);
    console.log(G.edges());     // I can see 6 edges printed on console
    jsnx.draw(G, {
        element: '#canvas',
        withLabels: true,
        nodeStyle: {
            fill: function(d) {
                return d.data.color;
            }
        },
        labelStyle: {fill: 'white'},
        stickyDrag: true
    });
</script>
</body>
</html>

And the result is

image

How to draw multiple parallel edges between two nodes?

Any help will be appreciated.