首页 > 代码库 > Icicle partition,这里的点击事件很厉害。

Icicle partition,这里的点击事件很厉害。

<!DOCTYPE html>
<html>
 <head>
   <title>Icicle</title>
 
   <script type="text/javascript" src=http://www.mamicode.com/"../d3.min.js"></script>
   <script type="text/javascript" src=http://www.mamicode.com/"Icicle.json"></script>
   <style type="text/css">
rect {
  stroke: #fff;
}

   </style>
 </head>
 <body>     
   <script type="text/javascript">
//svg
var w=900,h=500;
var svg=d3.select(body)
          .append(svg)
          .attr({
            width:w
            ,height:h
          })
          ;
//scale
var x=d3.scale.linear()
              .range([0,w])
              ;
var y=d3.scale.linear()
              .range([0,h])
              ;

//color
var color=d3.scale.category20c();

//partition
var partition=d3.layout.partition()
                       .children(function(d){
                        return isNaN(d.value)?d3.entries(d.value):null;//d.value是object,isNaN 为 true;var entry = d3.entries({ foo: 42 }); returns [{key: "foo", value: 42}];
                       })
                       .value(function(d){
                        return d.value;  //此d与之上的d不同,
                       })
                       ;

//rect
var rect=svg.selectAll(rect);
var root=json;
rect=rect.data(partition(d3.entries(root)[0]))   //d3.entries(root) return all entry;partition()转为分区函数。一定要赋值
    .enter()
    .append(rect)
    .attr({
        x:function(d){
            return x(d.x);
        }
        ,y:function(d){
            return y(d.y);
        }
        ,width:function(d){
            return x(d.dx);
        }
        ,height:function(d){
            return y(d.dy);
        }
        ,fill:function(d){
            return color((d.children ? d : d.parent).key);
        }        
    })
    .on(click,clicked)
    ;

function clicked(d) {
  x.domain([d.x, d.x + d.dx]);  
  y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);

  rect.transition()
      .duration(750)
      .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); });
}  
   </script>
 </body>
</html>

注:我用的是最简化的数据。

如果想加text,也很简单,只是在clicked中会重新定义y,所以在更新text时需要x(d.x+d.dx/2);(大概),刚开始定义时也可这样写,因为没有变scale,所以x(d.x)+x(d.dx)/2;也行。