
var margin = {top: 40, right: 10, bottom: 10, left: 10},
    width = 600 - margin.left - margin.right,
    height = 1000 - margin.top - margin.bottom;

var color = d3.scale.category20c();

var scale = d3.scale.linear()
                    .domain([2000000, 10000000000])
                    .range([10, 200]);

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .sort(function comparator(a, b) { return b.amount - a.amount; })
    .value(function(d) { return scale(d.amount); });

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

d3.json('/data/mockdata-truncated-01.json', function (error, data) {
  var node = div.datum(data).selectAll(".node")
        .data(treemap.nodes)
      .enter().append("div")
        .attr("class", "node")
        .call(position)
        .style("background", function(d) { return d.children ? null : color(d.title); })
        .text(function(d) { return d.children ? null : d.title; });

    d3.selectAll("input").on("change", function change() {
      var value = this.value === "count"
          ? function() { return 1; }
          : function(d) { return scale(d.amount); };

      node
          .data(treemap.value(value).nodes)
        .transition()
          .duration(1500)
          .call(position);
    });
});

function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}

@@ -1182,16 +1182,698 @@
 e; %7D);%0A%0A
+    var subnodes = node.each( function(d) %7B %0A      if (d.subnodes) %7B %0A        n = d3.select(this).selectAll(%22.subnode%22)%0A            .data(d.subnodes)%0A          .enter().append(%22div%22)%0A%0A            .style(%22position%22, %22relative%22)%0A            .style(%22width%22, %2230px%22)%0A            .style(%22height%22, %2230px%22)%0A            .style(%22left%22, %225px%22)%0A            .style(%22top%22, %225px%22)%0A%0A            .attr(%22class%22, %22subnode%22)%0A            .call(position)%0A            .style(%22background%22, function(s) %7B return color(s.title); %7D)%0A            .text(function(s) %7B return s.title; %7D);%0A                  ;%0A        console.log(n);%0A        // n.subnodes.each( function(s) %7B console.log(s) %7D);%0A      %7D %0A    %7D);%0A%0A
     d3.s

Add subnode proof-of-concept approach to treemap