树布局

优质
小牛编辑
144浏览
2023-12-01

树布局能够用莱因戈尔德-蒂尔福德算法产生一个整洁的树状结点-链接图。例如,树布局可以用来组织软件的包中类的层级结构。 像其他大多数布局一样,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