title: D3 Treemap parent and children
body: <p>Trying to understand this example <a href="http://bl.ocks.org/hemulin/3247757" rel="nofollow">http://bl.ocks.org/hemulin/3247757</a> of the treemap which uses a zoom feature. Currently the treemap uses the children to display at level 0.I'm trying to modify it so it can display the parent at level 0 and when clicked on it will zoom in and display the children at level 1.</p>
  
  <p>I've looked up Treemap example but don't quiet understand them. I'm not expecting someone to do this for me. Just a point in to the right direction would be great. </p>
  
  <p>My code: </p>
  
  <pre><code>    var w = 1280 - 80,
      h = 800 - 180,
      x = d3.scale.linear().range([0, w]),
      y = d3.scale.linear().range([0, h]),
      color = d3.scale.category10(),
      root,
      node;
  
      var treemap = d3.layout.treemap()
          .round(false)
          .size([w, h])
          .sticky(true)
          .padding([10, 0, 0, 0])
          .value(function(d) { return d.size; });
  
      var svg = d3.select("#body").append("div")
          .attr("class", "chart")
          .style("width", w + "px")
          .style("height", h + "px")
        .append("svg:svg")
          .attr("width", w)
          .attr("height", h)
        .append("svg:g")
          .attr("transform", "translate(.5,.5)");
  
  
        node = root = pathJson;
  
        var nodes = treemap.nodes(root)
            .filter(function(d) { return !d.children; });
  
        var cell = svg.selectAll("g")
            .data(nodes)
            .enter().append("svg:g")
            .attr("class", "cell")
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
            .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
  
        cell.append("svg:rect")
            .attr("width", function(d) { return d.dx - 1; })
            .attr("height", function(d) { return d.dy - 1; })
            .style("fill", function(d) { return color(d.parent.name); });
  
        cell.append("svg:text")
            .attr("x", function(d) { return d.dx / 2; })
            .attr("y", function(d) { return d.dy / 2; })
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .text(function(d) { return d.name; })
            .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx &gt; d.w ? 1 : 0; });
  
        d3.select(window).on("click", function() { zoom(root); });
  
        d3.select("select").on("change", function() {
          treemap.value(this.value == "size" ? size : count).nodes(root);
          zoom(node);
        });
  
  
      function size(d) {
        return d.size;
      }
  
      function count(d) {
        return 1;
      }
  
      function zoom(d) {
        //alert(d.name);
        var kx = w / d.dx, ky = h / d.dy;
        x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, d.y + d.dy]);
  
        var t = svg.selectAll("g.cell").transition()
            .duration(d3.event.altKey ? 7500 : 750)
            .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
  
        t.select("rect")
            .attr("width", function(d) { return kx * d.dx - 1; })
            .attr("height", function(d) { return ky * d.dy - 1; })
  
        t.select("text")
            .attr("x", function(d) { return kx * d.dx / 2; })
            .attr("y", function(d) { return ky * d.dy / 2; })
            .style("opacity", function(d) { return kx * d.dx &gt; d.w ? 1 : 0; });
            //.style("font-size", function(d) { return kx * d.dx &gt; d.w ? "20px" : "12px";});
  
        node = d;
        d3.event.stopPropagation();
      }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/noobiecode/9ev9qjt3/1/" rel="nofollow">https://jsfiddle.net/noobiecode/9ev9qjt3/1/</a></p>
  
  <p>Many thanks in advance.</p>