D3 Examples - Zoomable Icicle with Text in D3.js

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
​
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.js"></script>
<style>
    
rect {
  stroke: #fff;
}
</style>
</head>
<body>
    <div id="chart"></div>
​
<script type="text/javascript">
​
var w = 960,
    h = 500,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.category20c();
​
var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);
​
var partition = d3.layout.partition()
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });
​
d3.json("math_map_simple.json", function(json) {
  //var data = data(partition(d3.entries([json])[0]));
  //console.log(data);
  var cell = vis.selectAll("g")
      .data(partition(d3.entries(json)[0]))
    .enter().append("svg:g")
        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
        .on("click", click);
        
      //.attr("x", function(d) { return x(d.x); })
      //.attr("y", function(d) { return y(d.y); });
      
   cell.append("svg:rect")
      .attr("width", function(d) { return x(d.dx); })
      .attr("height", function(d) { return y(d.dy); })
      .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); });
      
      
   
   cell.append("svg:text")
        .attr("y",d.y+20)
        .attr("x",d.x+15)
        .text(function(d) { return d.data.key;});
​
  function click(d) {
    console.log('click',d)
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
    
    g.transition()
        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
        
    rect.transition()
      .duration(750)
      //.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
      //.attr("x", function(d) { return x(d.x); })
      //.attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
      .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
     
    text.transition()
        .duration(750);
  }
});
    </script>
  </body>
</html>
    