<!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. Oracle CHAR，VARCHAR，VARCHAR2,nvarchar类型的区别与使用(转载)

    一 varchar,varchar2,nvarchar,nvarchar2 四个类型都属于变长字符类型, varchar和varchar2的区别在与后者把所有字符都占两字节,前者只对汉字和全角等字符占 ...

  2. Linux 查看当前时间

    一.查看和修改Linux的时区1. 查看当前时区命令 : "date -R"2. 修改设置Linux服务器时区方法 A命令 : "tzselect"方法 B 仅 ...

  3. JDK-8不是有效的Win32应用程序

  4. 慕课网access_token的获取

    access_token的接口是微信公众号一个基础接口,access_token接口微信公众号一个非常重要的接口 access_token是微信公众号的全局唯一票据,公众号的所有接口的调用都需要使用到 ...

  5. monkey初接触

    第一次听说monkey,根本不知道是什么东西,脑海里就一个印象,很厉害的自动化测试工具,可是体验了一下,似乎不是那么回事... 一.Monkey 是什么? monkey就是SDK中附带的一个工具. 二 ...

  6. The valid characters are defined in RFC 7230 and RFC 3986

    网上大都说什么发送格式与协议定义的不兼容,改tomcat版本或改编码之类的. 本人测试的时候换了个浏览器,不用IE就好了 如果坚持用ie,也有解决方式 @参考文章 成功的方法 在请求地址var url ...

  7. N皇后问题12 · N-Queens

    ［抄题］: n皇后问题是将n个皇后放置在n*n的棋盘上,皇后彼此之间不能相互攻击. 给定一个整数n,返回所有不同的n皇后问题的解决方案. 每个解决方案包含一个明确的n皇后放置布局,其中“Q”和“.”分 ...

  8. C++ 输入cin 和输出cout

    C++输入cout与输出cin 输入和输出并不是C++语言中的正式组成成分.C和C++本身都没有为输入和输出提供专门的语句结构.输入输出不是由C++本身定义的,而是在编译系统提供的I/O库中定义的. ...

  9. sql优化常用命令总结

    1.显示执行计划的详细步骤 SET SHOWPLAN_ALL ON; SET SHOWPLAN_ALL OFF; 2. 显示执行语句的IO成本,时间成本 SET STATISTICS IO ON SE ...

  10. Bad Hair Day

    /* Some of Farmer John's N cows (1 ≤ N ≤ 80,000) are having a bad hair day! Since each cow is self-c ...