【D3】cluster layout

一、

和其他D3类一样,layout 可以链式传递,使用简明的申明添加多种自定义设置。

二、API

# d3.layout.cluster()

Creates a new cluster layout with the default settings: the default sort order is null; the default children accessor assumes each input data is an object with a children array; the default separation function uses one node width for siblings, and two node widths for non-siblings; the default size is 1×1.

使用默认配置创建新集群.

默认排序为null,

默认子节点是一个数组对象,

默认子节点之间宽度间隔为节点宽度,没有子节点为两个节点宽度,默认大小为1x1

# cluster(root
# cluster.nodes(root)

Runs the cluster layout, returning the array of nodes associated with the specified rootnode. The cluster layout is part of D3‘s family of hierarchical layouts. These layouts follow the same basic structure: the input argument to the layout is the root node of the hierarchy, and the output return value is an array representing the computed positions of all nodes. Several attributes are populated on each node:

运行集群布局,返回值为根节点下所有子节点列表,集群布局是D3 分层布局的一部分。这些布局都有共同的基础结构:1)输入参数根节点  2)返回值为所有计算好位置的节点列表。

每个节点有如下属性:

1)父节点 - 值可能为 父节点、null 、 根节点

2)子节点 - 值可能为 子节点列表、null、叶结点

3)深度 - 值可能为 0 ~ 最底层叶结点层级

4)x - 计算好的

时间: 2024-10-07 05:16:29

【D3】cluster layout的相关文章

【D3】D3学习轨迹-----学习到一定层度了再更新

1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p/4207847.html 3.   了解d3的基本使用API select  selectAll append attr enter  exit text on 4.  根据需要学习d3对应layout布局 待续

【Android】Android Layout Binder——根据layout布局文件自动生成findViewById的java代码的神器

Android Layout Binder是一个网站,能够在线的根据layout布局文件自动生成findViewById的java代码. 网址是http://android.lineten.net/layout.php 如图:

【ExtJS】 布局Layout

布局用于定义容器如何组织内部子元素和控制子元素的大小. ExtJS中有两种类型的布局:Container容器类布局与Component组件类布局. Containter容器类布局:负责容器内容Extjs元素和调整Extjs元素的大小. 包括:Border布局.Box布局.Fit布局等等. Component组件类布局:负责组织组件的HTML元素. 包括:Dock布局.Toolbar布局.Field布局.TriggerField布局. 一.Containter布局: 我们首先拿一张图来看看Cont

【D3】transition API

摘要: 动画类API 一.API 使用 1. 1 d3.ease 1.2 d3.timer Start a custom animation timer, invoking the specified function repeatedly until it returns true. There is no way to cancel the timer after it starts, so make sure your timer function returns true when do

【转载】PADS Layout将导入DXF,并转换成板框步骤

1.在PADS Layout中选择 Import... 2.选择DXF文件(一般由结构工程师给出),直接点OK即可. 3.导入后,板框图一角视图如下.右键选择 Select Shapes,然后双击外框. 4.将线的Type改成Board Outline,确定即可.如果提示无法转换,请将检查DXF文件,确定外框为“闭合多段线”(AutoCAD中设置). 转换成功后,应该如下所示: 5.将小圈转换成孔.右键选择 Select Shapes,,然后双击选择上图中的小圈圈,将Type修改成Board C

【原创】pads layout 画多边形copper,出现Self-Intersecting Polygon,解决办法

在做线性位移传感器的电路板时,需要在一个很小的多边形Copper操作,总是提示“Self-Intersecting Polygon”报错,意思是outline线自身交叉,换句话说就是线宽与多边形尺寸没有协调好.如下图现象: 解决办法: 1.将outline线宽调小,发现不在提示“Self-Intersecting Polygon”错误,但是敷铜变成网格状,如下图. 铜皮网格的现象,其原因是:这个线宽得小于系统设置的Copper Clearance这个值, 1)调整规则设置,Copper Clea

【 D3.js 高级系列 — 10.0 】 思维导图

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有"树形".因此,可以凭借这两种布局来制作思维导图. 1. 构造思路 树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name:

【 D3.js 入门系列 --- 9.5 】 树状图的制作

这一节学习树状图的制作.树状图的制作和集群图完全相同,经过这两种 layout 转换后的数据也很相似. 本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 树状图( Tree )通常用于表示层级.上下级.包含与被包含关系.树状图的制作和 9.4节集群图的制作 的代码几乎完全一样.不错,你没看错,几乎完全一样.那么为什么要把这两种图分开,它们有什么不同呢?先来看看对于同一组数据,它们的结果有什么不同.数据为: {

【 D3.js 入门系列 --- 9 】 常见可视化图形

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 D3 中不是这个意思. D3 中有很多 Layout 函数,它们不是为了在画面中布局什么,在 D3 中是对输入的数据进行转换,转换成比较容易进行可视化的数据.实际进行可视化时,需要其他的代码.我们可以简单地把 Layout 理解为"制作常见图形的函数",比如饼状图等等. D3 中一共提供了