CODEWITHSUNDEEP
javascriptd3.js
SoluableNonagon
SoluableNonagon

Reputation: 11755

D3 Partition - Show next level when clicked

I have a D3 partition which shows all the levels for the entire partition.

I would like to only show the first level when the chart loads and then show subsequent levels on click.

For example in this Tree the next level is shown on click of a node: D3Tree

Here is the code for my 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 would like to do something like 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 the children get set and unset, then redrawn

Upvotes: 2

Views: 669

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

To do something like the tree layout would be a little tough doing it with the help of display is a a cake walk.

When the path are drawn for the first time make all the nodes whose 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 whose depth is more than 1 make its vanish
    } else {
      return "";
    }
  })

Now on node click make all nodes reappear except when root node is clicked.

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

Working code here

Upvotes: 2

Related Questions