Json view for d3 voltage oriented networks

Question

I am trying to do network visualization of RISK. You can view it using the required code http://bl.ocks.org/4683850 .

Visualization works, but it takes a lot of manual labor. I manually adapted the json file so that the connections would have the following form:

{ "source": 1, "target": 0, "value": 5 } 

What needs to be done with the d3 code so that the connection is determined by the hostnames? Then the entry will be as follows:

 { "source": "WesternAustralia", "target": "NewGuinea", "value": 5 } 

Whenever I try, I get the following error:

 Uncaught TypeError: Cannot call method 'push' of undefined 

Answer 1

D3 docs explain how links work:

https://github.com/mbostock/d3/wiki/Force-Layout#wiki-links

In short, an array of links can contain indexes for source and target , which are reassigned by objects from nodes or contain links to objects from nodes . You need to reassign the source and target links to objects from nodes .

Assuming your source and target properties use names, as shown in the following example above, you can add the following snippet to the beginning of your d3.json to perform the remapping:

  var nodeMap = {}; graph.nodes.forEach(function(x) { nodeMap[x.name] = x; }); graph.links = graph.links.map(function(x) { return { source: nodeMap[x.source], target: nodeMap[x.target], value: x.value }; });