Skip to content

矩形树布局

tianxuzhang edited this page Nov 23, 2015 · 14 revisions

WikiAPI--中文手册布局矩形树布局

矩形树图最先由Ben Shneiderman在1991年提出; 矩形树图会递归的对一块矩形区域进行切分, 以达到层级展示的效果. 正如分区布局中, 每个节点的大小都是显而易见的. 正方化的矩形树图使用近正方的矩形, 因此, 相比于传统的切块或切片图, 具有更好的可读性和节点大小易读性. 还有其他一些关于矩形树图的算法, 比如: Voronoijigsaw, 但是并不常用.

treemap

和其他 D3 类一样, 布局也支持链式调用.

链式调用, 即: 一个setter方法会返回当前实例, 意味着意味着一个setter方法调用后可以紧接着另一个setter方法的调用, 如: selection.attr('x', 1).style('color', '#999')

# d3.layout.treemap()

使用默认的配置实例化一个新的矩形树布局: 默认的递减排序, 默认的值存取器会假定输入的数据是一个有value属性的对象, 默认的子节点存取器会假定输入的数据是一个以对象为元素的数组, 默认的绘图区域大小是[1, 1].

treemap(root)

treemap.nodes(root)

运行树形图布局,返回与指定根节点相关的节点数组。树状图布局是D3族分层布局的一部分。这些布局遵循相同的基本结构:布局的输入参数是层次结构的根节点,输出的返回值是代表所有节点计算的位置的数组。每个节点还有一些属性:

• parent -父节点,或根是null。 • children -子节点的数组,或叶节点是null。 • value -该节点的值,通过值访问器返回。 • depth -节点的深度,根开始为0。 • x -节点位置的最小横坐标。 • y -节点位置的最小纵坐标。 • dx -节点位置的x轴宽。 • dy -节点位置的y轴宽。

请注意,这会改变传递的节点! 虽然布局有x 和 y尺寸,这表示一个任意的坐标系统;例如,你可以以x为半径y为角度产生辐射状而不是直角的布局。在直角方向,x,y,dx和dy对应于“x”,“y”,“宽度”和“高度”的SVG矩形元素的属性。

treemap.links(nodes)

给定指定的节点数组,如返回的节点,返回一个对象数组代表从父到子节点的链接。叶节点将不会有任何链接。每一个关系都有两个属性的对象: • source -父节点(如上所述)。 • target -子节点。

这种方法是有用的,用于检索一组适合于显示的链接描述,经常与对角线形状发生器一起使用。例如: svg.selectAll("path") .data(partition.links(nodes)) .enter().append("path") .attr("d", d3.svg.diagonal());

treemap.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,则该节点在布局遍历终止被认为是叶节点。否则,访问应返回表示子节点的数据元素的数组。

treemap.sort([comparator])

如果比较器是指定的,使用指定比较函数设置布局的兄弟节点的排序顺序。如果没有指定比较器,返回当前组的排序顺序,默认为通过相关的输入数据的数值属性降序排列: function comparator(a, b) { return b.value - a.value; }

比较器函数节点对被调用,传递每个节点的输入数据。空比较器禁用排序并使用树的遍历顺序。比较器的功能也可以用d3.ascending或d3.descending实施。

treemap.value([value])

如果指定了值value ,将值访问器为指定的函数。如果值是未指定的,则返回当前值的访问器,假定输入数据是一个带有数值属性的对象: function value(d) { return d.value; } 值访问器调用被每个输入数据元素,并且必须返回一个表示该节点的数值。这个值用于按比例设定每个节点面积的值。

treemap.size([size])

如果尺寸size 是指定的,设置现有布局尺寸,指定代表x和y的数值的两元素数组。如果尺寸不是指定的,则返回当前大小,默认为1×1。

treemap.padding([padding])

为每个树形图单元获取或设置填充,以像素为单位。填充确定保留父节点和子节点之间的额外空间量;这个空间可以用于通过外边缘表示层次结构,或保留父标签的空间。如果不使用填充,那么树中叶子的内容会完全填满布局的大小。 如果指定了填充,则设置新的填充并返回树形布局;如果没有指定填充,则返回当前的填充。填充可以指定几种方法:

• 空值禁用填充;空等同于零。 • 一个数字表示均匀填充,以像素为单位,在所有四面。 • 数组的数值表示上,右,下和左填充值。 填充也可以被指定为一个函数,它返回上面的三个值中的一个。这个函数为每个内部(非叶)节点求值,并且可以被用来动态地计算填充。

treemap.round([round])

如果四舍五入round 是指定的,设置树状图布局是否将全面取整到像素边界。这可以很好地避免SVG边缘有锯齿。如果四舍五入不是指定的,返回是否将树状图四舍五入。

treemap.sticky([sticky])

如果粘滞sticky 是指定的,设置树形布局是否是“粘滞”: 粘滞树形布局将保留整个过渡中节点的相对排列。节点分成正方化水平和垂直行,通过每行中最后一个元素存储一个z属性持续整个更新;这允许节点平滑地调整大小,没有将阻碍感知变化值的洗牌或闭塞。但请注意,这会为两种状态之一生成一个次优的布局。如果没有指定粘滞,则返回的树形布局是否已被指定粘滞。

实现注意事项:粘滞树形图的内部缓存节点数组;因此,相同的布局实例不可能再使用于多个数据集。当切换带有粘滞布局的数据集时重置缓存状态,再次调用sticky(true)。自从版本1.25.0,层次布局不再在每次调用中默认复制输入数据,因此它可能是能够消除高速缓存和使布局完全无状态。

treemap.mode([mode])

如果模式mode 是指定的,设置布局的算法。如果模式没有指定,返回当前的布局算法,默认为“squarify”。支持以下模式: • squarify - rectangular subdivision; squareness controlled via the target ratio. • slice - horizontal subdivision. • dice - vertical subdivision. • slice-dice - alternating between horizontal and vertical subdivision. • squarify -矩形细分;矩形通过目标比率控制。 • slice –水平细分。 • dice -垂直细分。 • slice-dice -水平和垂直细分之间的交替。

  • ?译gulu
  • 校对2014-12-7 08:43:59
You can’t perform that action at this time.