<!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. 与servlet相关的接口

    (二)与servlet相关的接口 从servlet仅有的5个方法当中,我们知道其涉及3个接口,分别是: ServletConfig ServletRequest ServletResponse 2.1 ...

  2. How to create a Virtual Machine in SmartOS

    在SmartOS中,使用vmadm创建工具创建虚拟机. 此工具需要一个JSON有效负载,并使用输入JSON中指定的属性创建“kvm”或“joyent” brand zone. 正常输出是一系列单行JS ...

  3. exception keynote

    [exception keynote] Note that the parentheses around this tuple are required, because except ValueEr ...

  4. Excel日期处理

    short format = cell.getCellStyle().getDataFormat(); //其值为22 输入值类型为2018/6/28 17:25:48 if (format!=22) ...

  5. test5

    ## 前言 因为vs2010没有集成mvvmlight 所以想要使用mvvmlight的relaycomman需要引用dll 需要测试某个功能的时候,不能进行快带的集成 ## 引用mvvmlight ...

  6. Web标准：四、纵向导航菜单及二级弹出菜单

    Web标准:四.纵向导航菜单及二级弹出菜单 知识点: 1.纵向列表 2.标签的默认样式 3.css派生选择器 4.css选择器的分组 5.纵向二级列表 6.相对定位和绝对定位   1)纵向列表 可以看 ...

  7. Infinity，NaN

    常量 说明 Infinity 表示正无穷大的特殊值. -Infinity 表示负无穷大的特殊值. NaN Number 数据类型的一个特殊成员,用来表示“非数字”(NaN) 值. undefined ...

  8. Frog and Portal(思维好题)

    Frog and Portal https://hihocoder.com/problemset/problem/1873 时间限制:1000ms 单点时限:1000ms 内存限制:512MB 描述 ...

  9. python之socket运用2

    今天实现在客户端和服务端之间进行持续的通信 客户端代码 import socket ip_port = ("127.0.0.1",3000) sk = socket.socket( ...

  10. Excel日期格式调整

    3-Aug-2008   自定义格式: [$-809]d-mmm-yyyy;@ Aug-2008   自定义格式: [$-809]mmm-yyyy;@