<!DOCTYPE html>

<html>

 <head>

   <title>Icicle</title>

   <script type="text/javascript" src="../d3.min.js"></script>

   <script type="text/javascript" src="Icicle.json"></script>

   <style type="text/css">

rect {

  stroke: #fff;

}

   </style>

 </head>

 <body>

   <script type="text/javascript">

//svg

var w=,h=;

var svg=d3.select('body')

          .append('svg')

          .attr({

            'width':w

            ,'height':h

          })

          ;

//scale

var x=d3.scale.linear()

              .range([,w])

              ;

var y=d3.scale.linear()

              .range([,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)[]))   //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, ]).range([d.y ?  : , h]);

  rect.transition()

      .duration()

      .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;也行。

Icicle partition的更多相关文章

  1. D3js-API介绍【英】

    Everything in D3 is scoped under the d3 namespace. D3 uses semantic versioning. You can find the cur ...

  2. Partition：增加分区

    在关系型 DB中,分区表经常使用DateKey(int 数据类型)作为Partition Column,每个月的数据填充到同一个Partition中,由于在Fore-End呈现的报表大多数是基于Mon ...

  3. Partition：Partiton Scheme是否指定Next Used？

    在SQL Server中,为Partition Scheme多次指定Next Used,不会出错,最后一次指定的FileGroup是Partition Scheme的Next Used,建议,在执行P ...

  4. Partition：分区切换（Switch）

    在SQL Server中,对超级大表做数据归档,使用select和delete命令是十分耗费CPU时间和Disk空间的,SQL Server必须记录相应数量的事务日志,而使用switch操作归档分区表 ...

  5. sql 分组取最新的数据sqlserver巧用row_number和partition by分组取top数据

    SQL Server 2005后之后,引入了row_number()函数,row_number()函数的分组排序功能使这种操作变得非常简单 分组取TOP数据是T-SQL中的常用查询, 如学生信息管理系 ...

  6. Oracle Partition Outer Join 稠化报表

    partition outer join实现将稀疏数据转为稠密数据,举例: with t as (select deptno, job, sum(sal) sum_sal from emp group ...

  7. SQLServer中Partition By 函数的使用

    今天群里看到一个问题,在这里概述下:查询出不同分类下的最新记录.一看这不是很简单的么,要分类那就用Group By;要最新记录就用Order By呗.然后在自己的表中试着做出来: 首先呢我把表中的数据 ...

  8. [LeetCode] Partition Equal Subset Sum 相同子集和分割

    Given a non-empty array containing only positive integers, find if the array can be partitioned into ...

  9. [LeetCode] Partition List 划分链表

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

随机推荐

  1. vs2010+Aspx进行sharepoint2010工作流开发（3） 资料整理

    http://www.cnblogs.com/janet/archive/2010/04/24/1719315.html http://www.cnblogs.com/poissonnotes/arc ...

  2. webdriver屏幕截图（python）

    webdriver对当前页面进行截图,截取的是当前页面的全图,不论页面有多长,有两种截图方法 1.get_screenshot_as_file(XXX) 2.save_screenshot(XXX) ...

  3. python没有switch，可以用字典来替代

    python没有switch,是因为可以用字典来替代,具体方法如下: def add(x,y): print(x+y)def subtraction(x,y): print(x-y)def multi ...

  4. 修改hosts，***

    某些网站之所以在国内上不了,是因为dns受到干扰,无法解析出正确的ip地址. 可以在hosts文件中加入网站对应的正确ip地址,进行访问. 1.打开hosts文件,  路径为 C:\Windows\S ...

  5. 第五章 二叉树（b）树的表示

  6. C/C++ 宏

    0. #define MALLOC(n, type) \ ( (type *) malloc((n)* sizeof(type))) 1. 宏可以像函数一样被定义,例如:    #define min ...

  7. obstacle

    obstacle - 必应词典 美[ˈɑbstək(ə)l]英[ˈɒbstək(ə)l] n.障碍:障碍物:阻碍:绊脚石 网络妨碍:干扰:妨害

  8. ios 点击Home问题

    应用可以在后台运行或者挂起,该场景的状态跃迁过程见图2-22,共经历3个阶段4个状态:Active → Inactive → Background→Suspended. q   在Active→Ina ...

  9. 查看端口号根据pid号找到相关占用端口应用

    查看端口号根据pid号找到相关占用端口应用   8080 端口被占用不知道被哪个应用软件占用,下面我来教你查出那个该死的应用 方法/步骤   1 首先用netstat 找到端口对应的pid号,找到之后 ...

  10. 合并区间 · Merge Intervals & 插入区间 · Insert Interval

    ［抄题］: 给出若干闭合区间,合并所有重叠的部分. 给出的区间列表 => 合并后的区间列表: [ [ [1, 3], [1, 6], [2, 6], => [8, 10], [8, 10] ...