CODEWITHSUNDEEP
javascriptd3.jsjsnetworkx
D.Fig
D.Fig

Reputation: 149

Drawing graph with JSNetworkX

I'm starting to explore JSNetworkX because I need to include some visualizations in my project. I started with examples on jsnetworkx.org, but in every example I tried I got the same error:

jsnetworkx.js:5 Uncaught Error: D3 requried for draw().

I included D3, so I don't know where is the problem exactly. I tried to include older version of D3 like in this answer TypeError:undefined is not an object (evaluating 'M.layout.force') but it didn't help, nothing is displaying in browser.

Here's the example:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script src="jsnetworkx.js"></script>
  <script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>

      <script>
      var G = new jsnx.Graph();

      G.addWeightedEdgesFrom([[2,3,10]]);
      G.addStar([3,4,5,6], {weight: 5}); 
      G.addStar([2,1,0,-1], {weight: 3});

     jsnx.draw(G, {
          element: '#canvas',  
          weighted: true,
          edgeStyle: {
              'stroke-width': 10
          }
     });
   </script>

</body>
</html>

Upvotes: 3

Views: 1010

Answers (1)

Wolfgang von Ludwigsburg
Wolfgang von Ludwigsburg

Reputation: 76

  1. Change the script order
  2. downgrade to d3.v3.js
  3. provide the element, where the render should go
<script src="https://d3js.org/d3.v3.js"     ></script>
<script src="../javascripts/jsnetworkx.js"  ></script>

<div id="canvas"></div>

Upvotes: 6

Related Questions