树布局

最后更新于:2022-04-01 11:12:06

> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **树布局** * guluT20141102 * 如发现翻译不当或有其他问题可以通过以下方式联系译者: * 邮箱:zhang_tianxu@sina.com * QQ群:[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374,[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115 树布局能够用莱因戈尔德-蒂尔福德算法产生一个整洁的树状结点-链接图。例如,树布局可以用来组织软件的包中类的层级结构。 像其他大多数布局一样,d3.layout.tree返回的是一个对象也是一个函数。也就是说:你可以像调用其他函数一样调用布局,并且这个布局函数有可以改变它的行为的附加方法。像D3里的其他类一样,布局遵循函数的链式模式,其中setter返回布局本身,允许在简单的语句中调用多个setter方法。 # d3.layout.tree() 用默认设置创建一个树布局:默认的排序是null;默认的孩子访问器假定每个输入数据是一个带有孩子数组的对象;默认的操作函数为兄弟节点指定一个结点的宽度,没有兄弟姐妹的节点指定两个结点的宽度;默认的尺寸是1X1。 # tree(root) # tree.nodes(root) 运行树布局,返回一个与特殊的根结点root 有关系的结点数组。树布局是D3的层次布局家族中的一部分。这些布局遵循相似的基本结构:布局的输入参数是层次结构的根节点,输出返回值是一个经过计算的全部结点的位置的数组。 在每个结点中包含下面几个属性: •双亲-双亲结点,根节点无双亲。 •孩子-孩子结点的数组,叶子无孩子结点。 •深度-结点的深度,根节点深度为0。 •x-计算结点位置的x坐标。 •y-计算结点位置的y坐标。 尽管布局在x和y方向上有大小,这表示了一个任意的坐标系统;例如,你可以将x看做半径,将y看做角度去产生一个径向而不是笛卡尔布局。 # tree.links(nodes) 给定一个特殊的结点数组nodes,比如通过nodes返回的,返回一个表示从双亲结点到每个孩子结点的对象数组。叶子结点将不再有任何链接,每个链接是一个有两个属性的对象: •源结点-双亲结点(如上文描述) •目标结点-孩子结点 这种方法是有用的,用于检索一组适合于显示的链接描述,经常与对角线形状发生器一起使用。例如: svg.selectAll("path") .data(tree.links(nodes)) .enter().append("path") .attr("d", d3.svg.diagonal()); # tree.children([children]) 如果指定了子节点children ,设置指定的子节点访问器函数。如果未指定子节点,返回当前子节点访问器函数,默认情况下假定输入数据是一个带有子节点数组的对象: function children(d) { return d.children; } 通常,使用d3.json很方便加载节点的层次结构,并用嵌套JSON对象代表输入层次结构。例如: { "name": "flare", "children": [ { "name": "analytics", "children": [ { "name": "cluster", "children": [ {"name": "AgglomerativeCluster", "size": 3938}, {"name": "CommunityStructure", "size": 3812}, {"name": "MergeEdge", "size": 743} ] }, { "name": "graph", "children": [ {"name": "BetweennessCentrality", "size": 3534}, {"name": "LinkDistance", "size": 5731} ] } ] } ] } 子节点的访问器首先在层次结构的根节点调用。如果访问器返回null,则该节点在布局遍历终止被认为是叶节点。否则,访问器应返回表示子节点数据元素的数组。 # tree.separation([separation]) 如果指定分割separation ,使用指定的函数计算两个相邻节点之间的分割。如果,没有指定分割,返回当前的分割函数,默认为: function separation(a, b) { return a.parent == b.parent ? 1 : 2; } 变量更适合径向布局按比例减少半径之间的分割间隙: function separation(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; } 分割函数传入两个相邻节点a和b,必须返回节点之间期望的分割。如果布局决定放置这些相邻节点,节点通常是兄弟节点,即使节点可能是表兄弟(甚至更遥远的关系)。 # tree.size([size]) 如果指定尺寸size ,设置可用的布局尺寸为给指定的代表x和y两个元素的数组。如果没有指定的,返回当前的尺寸,默认是1x1。布局尺寸可能指定为x和y,但是并不限定屏幕坐标系和其他任意的坐标系统。例如,产生一个径向布局,其中breadth (x)以度为单位,depth (y)以像素为单位的半径r,例如[360,r]。 树的尺寸是tree.nodeSize特有的属性;设定tree.size设置tree.nodeSize为null。 # tree.nodeSize([nodeSize]) 如果指定了nodeSize,则为每个节点设置一个固定大小为代表x和y的两元素数组。如果没有指定的,则返回当前结点的尺寸,其中缺省为null表示该布局是使用整体tree.size属性,而不是使用固定的节点大小。布局尺寸用x和y指定,但是并不受限于屏幕坐标系和其他坐标系统。 nodeSize的属性是tree.size特有的;设定tree.size设置tree.nodeSize为null。 # tree.sort([comparator]) 如果指定比较器comparator,用指定的比较器来为布局的同级节点设置排序。如果比较器没有被指定,则返回当前组的排序,默认为空即不排序。比较函数被节点对直接调用,传入输入数据的每一个结点。默认的比较器是空,没有排序和者用树的遍历命令。例如,通过传递数据的数值来进行降序排列: function comparator(a, b) { return b.value - a.value; } 通过结点名或者关键字进行排序也是很普遍的。这可以用d3.ascending和d3.descending可以很容易实现。 # tree.value([value]) 如果值是指定的,则使用指定的函数来设置值访问器。如果值没有指定,则返回默认为空的当前值访问器,意思是这个值的属性不能被计算。如果指定,值访问器被每一个输入的数据元素调用,一定能返回一个表示结点值的数字。这个值对于布局来说是没有意义的,但是是层次布局提供的通用函数。 * 阿呆不呆20141128 * gulu校对2014-12-7 10:20:53
';