javascript - D3 Partition - Show next level when clicked -

i have d3 partition shows levels entire partition.

i show first level when chart loads , show subsequent levels on click.

for example in tree next level shown on click of node: d3tree

here code partition: plunker link

$(document).ready(function(){  var width = 600,     height = 400,     radius = (math.min(width, height) / 2) - 10;  var formatnumber = d3.format(",d");  var x = d3.scale.linear()     .range([0, 2 * math.pi]);  var y = d3.scale.sqrt()     .range([0, radius]);  var color = d3.scale.category20c();  var partition = d3.layout.partition()     .value(function(d) {        if(d.depth == 2)         console.log(d.depth, d);            return 1; // d.size;         });  var arc = d3.svg.arc()     .startangle(function(d) { return math.max(0, math.min(2 * math.pi, x(d.x))); })     .endangle(function(d) { return math.max(0, math.min(2 * math.pi, x(d.x + d.dx))); })     .innerradius(function(d) { return math.max(0, y(d.y)); })     .outerradius(function(d) { return math.max(0, y(d.y + d.dy)); });  var svg = d3.select("body").append("svg")     .attr("width", width)     .attr("height", height)   .append("g")     .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");      d3.json("flare.json", function(error, root) {   if (error) throw error;    svg.selectall("path")       .data(partition.nodes(root))     .enter().append("path")       .attr("d", arc)       .style("fill", function(d) { return color((d.children ? d : d.parent).name); })       .on("click", click)     .append("title")       .text(function(d) { return d.name + "\n" + formatnumber(d.value); }); });  function click(d) {   svg.transition()       .duration(750)       .tween("scale", function() {         var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),             yd = d3.interpolate(y.domain(), [d.y, 1]),             yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);         return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };       })     .selectall("path")       .attrtween("d", function(d) { return function() { return arc(d); }; }); }  d3.select(self.frameelement).style("height", height + "px");  }); 

i toggle on click:

// toggle children. function toggle(d) {   if (d.children) {     d._children = d.children;     d.children = null;   } else {     d.children = d._children;     d._children = null;   } } 

where children set , unset, redrawn

to tree layout little tough doing of display a cake walk.

when path drawn first time make nodes depth > 1 disappear using display:none:

svg.selectall("path")   .data(partition.nodes(root))   .enter().append("path")   .attr("d", arc)   .style("fill", function(d) {     return color((d.children ? d : d.parent).name);   })   .style("display", function(d) {     if (d.depth > 1) {       return "none";//nodes depth more 1 make vanish     } else {       return "";     }   }) 

now on node click make nodes reappear except when root node clicked.

  .style("display", function(d1) {     if (d.depth == 0 && d1.depth > 1) {       return "none"//root node clicked show 2 depths.     } else {       return "";     }   }) 

working code here