fkling / JSNetworkX

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

jsnetworkx.js:5 Uncaught TypeError: Cannot read property 'force' of undefined #62

Open ScientiaEtVeritas opened 8 years ago

ScientiaEtVeritas commented 8 years ago

Hi, I'm trying to draw the graph, but always get this error: jsnetworkx.js:5 Uncaught TypeError: Cannot read property 'force' of undefined

Even if I try sth. like this: ` G = new jsnx.Graph();

    G.addNode(1);
    G.addNode(2);

    G.addEdge(1,2);

    jsnx.draw(G, {
      element: '#canvas',
      withLabels: false
    });`

Does someone have an idea what's the reason for this?

D3 is included.

Thanks in advance.

juhojo commented 7 years ago

Hey, I was experiencing the same issue and downgrading d3 version was the solution for me. Try changing you d3 script to this one:

jeffzemla commented 7 years ago

Downgrading d3 resulted in a different error for me:

Uncaught TypeError: Cannot read property 'getComputedStyle' of null

I tried implementing ScientiaEtVeritas's example and also some examples from the jsnetworkx.org page.

juhojo commented 7 years ago

Are you certain that you did pass a correct element to the jsnx.draw()- function? getComputedStyle method is used to

give the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain. MDN - Mozilla Foundation

so it appears to me that the canvas element you have created in your HTML DOM does not have an id canvas, therefore resulting in the compile error.

I cannot provide more suggestions, because I have not yet received a similar error.

revosys commented 7 years ago

i m facing same problem...

bigbasti commented 7 years ago

Downgrading d3 also solved this issue for me

revosys commented 7 years ago

My code is simple.... but still this is the issue...

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

var G = new jsnx.Graph();
G.addNodesFrom([
    [1, {color: 'red'}],
    [2, {color: 'green'}],
    [3, {color: 'white'}]
]);

G.addEdgesFrom([[1,2], [1,3]]);

// `jsnx.draw` accept a graph and configuration object
jsnx.draw(G, {
  element: '#canvas',
  withLabels: true,
  nodeStyle: {
      fill: function(d) {
          return d.data.color;
      }
  }
});

</script>

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

Error is Uncaught TypeError: Cannot read property 'getComputedStyle' of null at Array.d3_selectionPrototype.style (d3.v3.js:740) at Object.i [as draw] (jsnetworkx.js:5)

bigbasti commented 7 years ago

just a wild guess here: shouldn't you declare the div you want to draw in BEFORE drawing on it? (move the div before the script)

revosys commented 7 years ago

thanks for your reply.... ITS WORKING....:) Thanks

bigbasti commented 7 years ago

i just tried your code - got the same error - moved the div above the script tag and everything ran fine

revosys commented 7 years ago

Yes.... Some time over load work can make you behave like idiot...:)

snipercup commented 4 years ago

I have the same problem. I can downgrade to d3 v3, but then I get the error: jsnetworkx.js:5 Uncaught Error: D3 requried for draw()

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