Understanding Force Related Data Structures

[Guerino1]

Hi All,

I'm working w/ the example "Force Directed Tree Layout From List", trying to understand the associative arrays that are fed into the "nodes" and "links" for a Force based diagram.  My goal is to get a simple example working with in-page data that is modeled as associative arrays and my initial data structures look like:

      var nodes = [

        {id: "N1", name: "Node 1", type: "Type 1"},

        {id: "N2", name: "Node 2", type: "Type 2"},

        {id: "N3", name: "Node 3", type: "Type 3"}

      ];

      var links = [

        {source: "N1", linkName: "Relationship 1", target: "N2"},

        {source: "N3", linkName: "Relationship 2", target: "N1"}

      ];

However, when I run the following code in the debugger:

      var force = d3.layout.force()

          .charge(-120)

          .distance(30)

          .nodes(nodes)

          .links(links)

          .size([w, h])

          .start();

I get an error that reads "TypeError: 'undefined' is not an object (evaluating 'neighbors[o.source.index].push')".  The d3.js library appears to be trying to determine neighboring nodes at failure.

Pardon my inexperience but are my data structures not laid out properly?  I don't see anything in the documentation or in the forum that addresses the topic of data structure layout for Forces and I'm kind of stumped.  Trying to work backwards, from the interior of the d3.js library is not easy (although I'm trying).

Thanks for any help you can offer.  It's greatly appreciated,

Frank

[zohane]

Try to check if your nodes and links are correct by using the console debugging. I do it, with Chrome, and console.log(nodes). This way you can check if they're correct, because sometimes they're not, and it's when the start() function fails.

It's probably a mistake, when you store the data.  So check them !! 

[Frank Guerino]

Hi Zohane,

Thanks for the reply.  I got it to work.  I was using the debugger but it was a bit confusing.  Ger Hobbelt had a great approach to solving the problem that he documented in the following "forum post".

The example is located at "D3 Based Force Directed Radial Graph".

It appears that the key to making it work was to assign the node "objects" to each source and target, in links, as opposed to just the node ID or name string.

My next steps are to understand how to...

• add labels to nodes
• add labels to links/edges
• add arrows to links/edges, 
• color code each node based on its type, and
• control mouseover/mouseout

Anyhow, thanks for your help.  I appreciate it.

Frank