d3.js force piechart nodes

I am interested in making this force-piechart hybrid. I've tried merging these two charts together - to create a placeholder for the pie chart module to become exposed.

//pie chart http://jsfiddle.net/Qh9X5/10111/

//Force chart http://jsfiddle.net/Qh9X5/10110/

//merged chart attempt1 http://jsfiddle.net/Qh9X5/10114/

//merged chart attempt 2 - LATEST http://jsfiddle.net/k0pn3x5o/3/

  var datajson = {     "name": "parentnode",     "children": [{       "name": "A",       "children": [{         "name": "Cherry",         "size": 3938       }, {         "name": "Apple",         "size": 3812       }, {         "name": "Banana",         "size": 6714       }]     }, {       "name": "B",       "children": [{         "name": "Strawberry",         "size": 3938       }, {         "name": "Apricot",         "size": 3812       }]     }]   }; 

1 Answers

Answers 1

You just need to use the correct node elements and update them correctly.

Use a g for the node then put whatever you want inside.

 node.enter().append("g")     .attr("class", "node")     .attr('transform', d => ("translate(" + d.x + "," + d.y + ")"))     //Insert pie chart here. 

Inside the tick function you then only need to update the outer g position to have it layout correctly.

node.attr('transform', d => ("translate(" + d.x + "," + d.y + ")")); 

http://jsfiddle.net/k0pn3x5o/

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati