modifying the d3 force-directed graph example

Question

I\'m new to javascript and D3.js, and I am trying to understand how it all works. I have been playing with the force-directed graph example here: http://bl.ocks.org/mbostock/406

Answer 1

D3 provides two ways of specifying link source and target for the force layout. The first, used in the example you've linked to, is to provide the index of the node in the array of nodes. When the force layout is started, this is replaced with the reference to the actual node. The second is to provide the reference to the actual node explicitly.

To reference a node by name, you need something that allows you to resolve that reference. For example:

var nodeMap = {};
graph.nodes.forEach(function(d) { nodeMap[d.name] = d; });

Then you can do

graph.links.forEach(function(l) {
  l.source = nodeMap[l.source];
  l.target = nodeMap[l.target];
})

You can of course also use this to define links to start with:

"links":[
 {"source":nodeMap["stkbl0001"],"target":nodeMap["stkbl0005"],"value":3}
]