javascript - How to link extra attributes from json data in a D3.js force layout? -

i have followed various examples mike bostock create collapsible force layout directed paths , images @ nodes (related this other question).

now, want link information of nodes if contain information, structured data in json string.

the json string looks this:

 {    "name": "somename",    "text": "some text",    "extradata": [             {               "type": "sometype",               "icon": "someicon.png"             },             {                "type": "sometype02",               "icon":  "someicon.png"             }    ],    "children": [     {         "name": "somename",         "text": "some text",         "extradata": [             {               "type": "sometype",               "icon": "someicon.png"             },         ]     },     {         "name": "somename",         "text": "some text",         "extradata": [             {               "type": "sometype",               "icon": "someicon.png"             },             { .... },             { .... },             { .... },             ....         ],         "children": [         {             ....         }     },     ........ 

in short, display of values of extradata[] array linked every node extradata attribute. end result image below, blue circles represent contents extradata (e.g sometype or sometype02).

i'm having trouble understanding how parse json string in order values, , how create links nodes belong.

the beauty of d3 javascript objects intrinsically linked dom objects represent them. might data drives document.

presumably have this:

var node = svg.selectall(".node")     .data(data.nodes)     .enter().append("circle")     [...] 

maybe want color each node according first datatype property in json:

var node = svg.selectall(".node")     .data(data.nodes)     .enter()     .append("circle")     .style("fill", function(d) {          return d.extradata[0].type === "sometype" ? "#ff0000" : "#0000ff";     }) 

point is, have access object in d variable passed function.

here's example of using fdl , coloring nodes data property. includes tooltips.