ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **层次布局** * 如发现翻译不当或有其他问题可以通过以下方式联系译者: * 邮箱:zhang_tianxu@sina.com * QQ群:[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374,[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115 分层布局是一种抽象布局,不直接使用。但它允许在不同的分层布局中共享节点。请看下列例子: • Cluster -簇实体构成树状图。 • Pack -使用递归圆填充法创建一个分层布局。 • Partition -将节点树递归划分成辐射状或环状。 • Tree -将节点树整齐放置。 • Treemap -使用递归空间划分显示节点树。 虽然不是分层布局,但捆绑布局可以同分层共同使用。 # d3.layout.hierarchy() 使用以下默认设置创建新的分层布局:默认排序顺序为值的降序排列;默认值访问器假定每个输入数据为一个含数值属性的对象;默认子访问器假定每个输入数据为一个含子数列的对象。 # hierarchy(root) 运行分层布局,返回节点数组及指定的根节点。布局的输入参数为分层的根节点,输出返回值为一个数组,表示计算过的所有节点的位置。每个节点都有各自属性:  parent -父节点,在根节点时为空。  children -子节点数组,在叶节点时为空。  value -节点值,由值访问器返回。  depth -节点深度,从根节点计算,值从0开始。 此外,多数分层布局也会计算节点的x和y的位置;详见实现类。 # hierarchy.links(nodes) 指定节点数组返回一个对象数组,该数组表示每个节点中父节点同子节点之间的关系。叶节点没有任何关系。每个节点都是一个具有两个属性的对象:  源-父节点(如上述所示)。  目标-子节点。 该方法在获取一组关系描述时很有效果,通常与对角图形生成器共同使用。例如: svg.selectAll("path") .data(partition.links(nodes)) .enter().append("path") .attr("d",d3.svg.diagonal()); # hierarchy.children([accessor]) 如果accessor已经指定,则设定子访问器函数。如未指定,则返回当前子访问器函数,该函数将输入数据默认为带子数组的对象: functionchildren(d){ returnd.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} ] } ] } ] } 在分层中,子访问器在根节点首先被调用。如果访问器返回值为空,则该节点在布局遍历结束时被假定为叶节点。否则,访问器需要返回数据源数组,来表示子节点。参数node和depth都需要调用访问器。 # hierarchy.sort([comparator]) 如已指定comparator,则使用指定的comparator函数设定布局的同级节点节点顺序。如comparator未指定,则返回当前分组的排序顺序,默认值为按照输入数据的字符串名对节点的降序顺序排序: functioncomparator(a,b){ returnb.value-a.value; } 为每对节点,调用comparator函数。零comparator禁用排序,使用树遍历顺序。comparator函数也可以通过d3.ascending或d3.descending实现。 # hierarchy.value([value]) 如果已经指定value,则用指定的函数设定值访问器。如果尚未指定value,则返回当前值访问器。默认访问器假定输入数据为一个具有数值属性的对象: functionvalue(d){ returnd.value; } 每次输入数据元素,都会调用值访问器,并且必须返回一个用以表示节点数值的数字。对于区域布局,如树图,该值用于设定每个节点值相应的面积。对于其他布局,该值对簇布局没有影响。 # hierarchy.revalue(root) 对于一棵指定的树,从根开始重计算每个节点的值,但不需对子节点进行重新排序或重新计算。该方法可以用于对每个节点值进行重新计算,但又不必对分层做出任何结构改变。最初,该方法是用来支持sticky treemaps的。 * 张烁译 20140430 * 咕噜校对 2014-11-30 10:42:08