D3.js学习笔记(5)--布局(构图)

D3提供的布局有12种,具体见官网:https://d3js.org/
布局不是要直接绘图而是获取绘图所需数据


Bundle

d3.layout.bundle - 构造一个新的捆图布局
bundle - 应用霍顿的边缘捆绑算法

弦图(Chord)

d3.layout.chord - 初始化一个弦图对象, 返回一个 Chord 实例

chord.matrix - 设置或者获取弦图实例对应的矩阵数据

chord.padding - 设置或获取弦图各段圆弧之间的间隔角度

chord.sortGroups - 设置或获取矩阵分组的排序函数

chord.sortSubgroups - 设置或获取矩阵二级分组的排序函数

chord.sortChords - 设置或获取弦图在z序上的排序函数(决定哪一组显示在最上层)

chord.chords - 该函数会将参数处理成对 chord 更友好的格式并返回, 若没有提供参数, 会调用matrix()来获取数据

chord.groups - 该函数参数处理成更易于理解的分组信息, 若没有提供参数, 会调用matrix()来获取数据

集群(Cluster)

d3.layout.cluster - 用默认设置生成一个集群布局对象.

cluster.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序.

cluster.children - 获取或设置子结点的访问器.

cluster.nodes - 计算并返回指定结点的子结点在集群中的信息(坐标,深度等).

cluster.links - 指定一个子结点数组(通常是**nodes**函数返回值), 计算它们与父结点的连接信息.

cluster.separation - 获取或设置相邻结点间的间隔(不仅限于兄弟结点).

cluster.size - 获取或设置布局的 *宽* 和 *高* 的大小.

cluster.nodeSize - 为结点指定大小.

力学(Force)

d3.layout.force -节点(node)基于物理模拟的位置连接。

force.on - 监听布局位置的变化。(仅支持"start","step","end"三种事件)

force.nodes - 获得或设置布局中的节点(node)阵列组。

force.links - 获得或设置布局中节点间的连接(Link)阵列组。.

force.size - 获取或设置布局的 *宽* 和 *高* 的大小.

force.linkDistance - 获取或设置节点间的连接线距离.

force.linkStrength - 获取或设置节点间的连接强度.

force.friction - 获取或设置摩擦系数.

force.charge - 获取或设置节点的电荷数.(电荷数决定结点是互相排斥还是吸引)

force.gravity - 获取或设置节点的引力强度.

force.theta - 获取或设置电荷间互相作用的强度.

force.start - 开启或恢复结点间的位置影响.

force.resume - 设置冷却系数为0.1,并重新调用start()函数.

force.stop - 立刻终止结点间的位置影响.(等同于将*冷却系数*设置为0)

force.alpha - 获取或设置布局的冷却系数.(冷却系数为0时,节点间不再互相影响)

force.tick - 让布局运行到下一步.

force.drag - 获取当前布局的拖拽对象实例以便进一步绑定处理函数.

层级布局(Hierarchy)

d3.layout.hierarchy - 获得一个自定义的层级布局的实现.

hierarchy.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序.

hierarchy.children - 获取或设置子结点的访问器.

hierarchy.nodes - 计算并返回指定结点的子结点信息.

hierarchy.links - 指定一个子结点数组(通常是**nodes**函数返回值), 计算它们与父结点的连接信息.

hierarchy.value - 获取或设置结点的**值**访问器.

hierarchy.revalue - 重新计算层级布局.

直方图(Histogram)

d3.layout.histogram - 构建一个默认直方图(用来表示一组离散数字的分布,横轴表示区间,纵轴表示区间内样本数量或样本百分比).

histogram.value - 获取或设置值访问器.

histogram.range - 获取或设置合法值范围.

histogram.bins - 指定如何将数据分组到不同的区间(bin)里, 返回一个构造函数

histogram - 根据已设置的区间将数据分组,返回已分组的二维数组).

histogram.frequency - 设置直方图Y轴值是区间内数据的总量还是百分比

层包(Pack)

d3.layout.pack - 用递归的圆环表现一个多层级布局.

pack.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序.

pack.children - 获取或设置子结点的访问器.

pack.nodes - 计算并返回指定结点的子结点信息.

pack.links - 指定一个子结点数组(通常是**nodes**函数返回值), 计算它们与父结点的连接信息.

pack.value - 获取或设置一个函数, 用来计算圆环的大小(近似值).

pack.size - 设置整个布局画布的 *宽* and *高*.

pack.radius - 如果不想结点半径与结点的值相同, 可以传入一个函数用来计算结点半径.

pack.padding - 指定相邻结点之点的间距(近似值).

分区(Partition)

d3.layout.partition - 将一棵树递归的分区.

partition.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序.

partition.children - 获取或设置子结点的访问器.

partition.nodes - 计算并返回指定结点的子结点信息.

partition.links - 指定一个子结点数组(通常是**nodes**函数返回值), 计算它们与父结点的连接信息.

partition.value - 设置一个函数来来计算分区的值.

partition.size - 设置整个布局画布的 *宽* and *高*.

饼图(pie)

d3.layout.pie - 构建一个默认的饼图.

pie - 该函数将传入的原始参数转换成可用于饼图或者环形图的数据结构.

pie.value - 获取或设置值访问器.

pie.sort - 设置饼图顺时针方向的排序方法.

pie.startAngle - 设置或获取整个饼图的起始角度.

pie.endAngle - 设置或获取整个饼图的终止角度.

堆叠图(Stack)

d3.layout.stack - 构建一个默认的堆叠图(用来展示一系列x轴相同的面积图或者立方图).

stack - 计算每一层的基线.

stack.values - 设置或者获取每层的值访问器.

stack.order - 设置每层的排序.

stack.offset - 指定总的基线算法.

stack.x - 设置或获取每层的x轴访问器.

stack.y - 设置或获取每层的y轴访问器.

stack.out - 设置或获取用来储存基线的输出函数.

树(Tree)

d3.layout.tree - position a tree of nodes tidily.

tree.sort - 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序.

tree.children - 设置或获取子结点的访问器.

tree.nodes - 计算并返回指定结点的子结点信息.

tree.links - 指定一个子结点数组(通常是**nodes**函数返回值), 计算它们与父结点的连接信息.

tree.separation - 设置或获取相隔结点之间的间隔计算函数.

tree.size - 指定整个布局的宽和高.

tree.nodeSize - 给全部结点指定一个固定的大小(会导致`tree.size`失效)

矩阵树(Treemap)

d3.layout.treemap - 返回一个矩阵树对象(用矩阵来展示一颗树).

treemap.sort - 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序.

treemap.children - 设置或获取子结点的访问器.

treemap.nodes - 计算并返回指定结点的子结点信息.

treemap.links - 指定一个子结点数组(通常是**nodes**函数返回值), 计算它们与父结点的连接信息.

treemap.value- 设置或获取一个用来计算单元格大小的值访问器.

treemap.size - 指定整个布局的宽和高.

treemap.padding - 指定父结点和子结点的间距.

treemap.round - 禁用或启用边界补偿.

treemap.sticky - 让布局更"粘"以保证在更新数据时有平滑的动画效果.

treemap.mode - 更改矩阵树的布局算法.

--------以上为D3 提供的布局相关api-------
最后还是那句话:布局不是要直接绘图,而是获取绘图所需数据

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 布局将数据计算成为方便绘图的数据D3提供布局12个 1 d3.pie() 饼图 通过d3.pie()计算数据,d3...
    Doter阅读 464评论 0 1
  • 本节内容将描述饼状图、力导向图、弦图、集群图、树状图、打包图、分区图、圆形分区图、直方图、捆图、堆栈图、矩阵树图、...
    笨笨的笨小孩阅读 6,420评论 0 2
  • 上一节中, 我们对于svg 的坐标系统 和 常用的比例尺进行了学习, 了解了坐标轴的建立,懂得了数据绑定和事件回调...
    金字笙调阅读 1,678评论 0 4
  • layout的作用:转化数据格式,使其变为可视化所需要的数据格式。 d3中的layout分别有:1.Bundle-...
    桃桃阅读 1,645评论 0 1
  • 我家有一只小狗,它很可爱。她的鼻子是带点儿的,很好玩。你要是手摸着鼻子传到哪去,那个鼻子就会转到哪去?小狗还是红色...
    41f9d0a5c8db阅读 274评论 0 0