<!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. [故障引起的故事]URL中带加号的处理

    问题起因:      客户订购了一关键字为"e+h 变送器" , 在首页推荐广告中,会根据用户在search 搜索过的关键字进行一个匹配投放.技术实现是UED 通过JS 获取coo ...

  2. zabbix3.2的server和zabbix-agent2.2怎么监控MySQL的办法

    zabbix官方支持监控MySQL,但直接使用默认的模板是不可用的,还需要经过额外的设置才可以使用.如果只需要对mysql数据库做简单的监控,zabbix自带的模板完全能够满足要求:如果有更高的需求那 ...

  3. rsa 公钥 私钥

    如果用于加密解密,那就是用公钥加密私钥解密(仅你可读但别人不可读,任何人都可写)如果用于证书验证,那就是用私钥加密公钥解密(仅你可写但别人不可写,任何人都可读) 最后,RSA的公钥.私钥是互相对应的. ...

  4. Linux下tar.gz 安装

    将安装文件拷贝至你的目录中 如果是以root身份登录上的,就将软件拷贝至/root中. cp xxx.tar.gz /root 解压缩包 tar xvzf xxx.tar.gz 切换到安装目录下 cd ...

  5. configparser模块 logging模块

    configparser模块 固定格式的配置文件 有一个对应的模块去帮你做这个文件的字符串处理 config = configparser.Configparser() config.read(“ex ...

  6. MyBatis多对多查询

    -------------------siwuxie095                                 MyBatis 多对多查询         以订单和商品为例,即 一个订单可 ...

  7. GridView中如何实现自定义时间货币等字符串格式？

    方法一: <asp :GridView ID="GridView1" runat="server"> <columns> <asp ...

  8. 转---tcp三次握手四次挥手syn fin......

    http://blog.chinaunix.net/uid-22312037-id-3575121.html转自 一.TCP报文格式        TCP/IP协议的详细信息参看<TCP/IP协 ...

  9. IBM关闭触摸板的方法

    开始按Enter进入BIOS > Configure > Keyboard/Mouse > TouchPad,设置为DisabledF10保存退出

  10. 坑爹的HP

    昨天晚上帮人远程修理电脑,情况是这样的: HP CQ45笔记本, 比较老的机器, win32 xp sp3 系统, 突然发现没有声音了,而且右下角也没有出现小喇叭图标. 处理过程: 1.先查看了控制面 ...