<!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. 练习：自己写一个容器ArrayList集合 一一数组综合练习2

    package cn.bjsxt.collection; /** * 自己实现一个ArrayList */ import java.util.ArrayList; import java.util.L ...

  2. js中常用的内部函数的使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Mysql一些记忆

    mysql修改密码报错是yum 安装mysql5.7 是 出现无法登陆问题以及mysql error You must reset your password using ALTER USER sta ...

  4. Linux查看内存使用情况

    输入:top PID:进程的ID USER:进程所有 PR:进程的优先级别,越小越优先被执 NInice: VIRT:进程占用的虚拟内 RES:进程占用的物理内 SHR:进程使用的共享内 S:进程的状 ...

  5. java并发：Condition的应用

    Condition类可以使线程等待,也可以唤醒线程.Condition类的await方法和Object类的wait方法等效Condition类的signal方法和Object类的notify方法等效C ...

  6. cdoj203-Islands 【并查集】

    http://acm.uestc.edu.cn/#/problem/show/203 Islands Time Limit: 30000/10000MS (Java/Others)     Memor ...

  7. sublimetext 2 编译文件带input时 提示 EOFError: EOF when reading a line

    昨天在网下下载了个什么sublimetxt 2 的破解版,然后让我折腾了半天,没错 ,就是因为这个 EOFError: EOF when reading a line错误让我搞的半死.怨自己,贪图中文 ...

  8. ios 处理WKContentView的crash

    http://www.jianshu.com/p/7ef5814a871b     解决WKContentView没有isSecureTextEntry方法造成的crash 程序中有web页面,使用W ...

  9. 【校招面试 之 剑指offer】第16题 数值的整数次方

    方法1:直接求解,但是要注意特殊情况的处理:即当指数为负,且底数为0的情况. #include<iostream> using namespace std; template<typ ...

  10. Judy Array API介绍

    本文介绍https://code.google.com/p/judyarray/这个JudyArray实现的API. judy_open:新建一个JudyArray,并返回指向这个JudyArray的 ...