矩形树布局

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.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.