javascript - Google Visualization Org Chart - dynamically reduce space between nodes -
i'm creating org chart using google's code
google.setonloadcallback(drawchart); function drawchart() { var data = new google.visualization.datatable(); data.addcolumn('string', 'name'); data.addcolumn('string', 'manager'); data.addcolumn('string', 'tooltip'); data.addrows([ [{v:'mike', f:'mike<div style="color:red; font-style:italic">president</div>'}, '', 'the president'], [{v:'jim', f:'jim<div style="color:red; font-style:italic">vice president</div>'}, 'mike', 'vp'], ['alice', 'mike', ''], ['alice2', 'mike', ''], ['alice3', 'mike', ''], // ['alice4', 'alice3', ''], // ['alice5', 'alice3', ''], // ['alice6', 'alice3', ''], // ['alice7', 'alice3', ''], // ['alice8', 'alice3', ''], // ['alice9', 'alice3', ''], ['bob', 'jim', 'bob sponge'], ['carol', 'bob', ''] ]); var chart = new google.visualization.orgchart(document.getelementbyid('chart_div')); chart.draw(data, {allowhtml:true, allowcollapse:true}); }
i want space between nodes adjusted dynamically when collapsed, , not set pre-computed distance based on number of child nodes. illustrate, created 2 hierarchies in jsfiddle
- https://jsfiddle.net/s3azv8pf/1/ - when collapse 'alice3' node, want below
- https://jsfiddle.net/mv77qrms/1/
in other words, when node collapsed, want displayed if had no children. when expand node, should slide right , take more space, similar mike bostock's collapsible reingold tree
Comments
Post a Comment