Setting D3 Force Graph parameters using json

I am trying to create a more reusable version of the power web in d3.js. My thought was to be able to use the json file containing the data to specify the network properties.

{
  "nodes":[
    {"name":"Myriel","group":1},
    {"name":"Napoleon","group":1},
    {"name":"Mlle.Baptistine","group":1},
    //etc.....
    {"name":"Child2","group":10},
    {"name":"Brujon","group":4},
    {"name":"Mme.Hucheloup","group":8}
  ],
  "links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":0,"value":8},
    {"source":3,"target":0,"value":10},
    //etc....
    {"source":76,"target":62,"value":1},
    {"source":76,"target":48,"value":1},
    {"source":76,"target":58,"value":1}
  ],
  "graph":{"charge":-220,"linkDistance":50}
}

      

To do this, I have translated the call to d3.layout.force () into a json call, see this jsfiddle .

Then I define the graph behavior as

var force = d3.layout.force()
.charge(graph.graph.charge)
.linkDistance(graph.graph.linkDistance)
.size([width, height]);

      

My question is, is this the correct way to do it. The only drawback I see at the moment is that it takes a little longer to initialize the graph. Is there a better way?

+3


source to share





All Articles