簇布局

Howard Liang edited this page Mar 31, 2016 · 3 revisions

WikiAPI--中文手册布局簇布局

**簇布局(cluster layout)**可以产生树状图(dendrograms):将树的叶节点放在同一深度的节点连接图。例如,簇布局可以用来在软件包层次结构中组织类:

cluster

同D3中的其他类一样,布局遵循方法链模式,在该模式下设置器(setter)方法返回布局本身,允许使用简单语句调用多个setter。

# d3.layout.cluster()

使用默认设置创建新的簇布局:默认排序为空;默认子访问器假定每个输入数据为带子数组的对象;默认分离函数在同层级使用一个节点宽度,在不同层级使用两个节点宽度;默认尺寸为1×1。

# cluster(root)
# cluster.nodes(root)

运行簇布局,返回节点数组及指定的根节点。簇数组为D3分层布局家族的一部分。这些布局具有相同的基本结构:布局的输入参数为分层的根节点(root),输出返回值为一个数组,表示计算过的所有节点的位置。每个节点都有各自属性:

  • 上层 - 父节点,在根节点时为空。
  • 下层 - 子节点数组,在叶节点时为空。
  • 深度 - 节点深度,从根节点计算,值从0开始。
  • x - 节点位置的x坐标值。
  • y - 节点位置的y坐标。

虽然布局在xy轴有值存在,但这表示一个任意坐标系;例如,可以将x坐标视为直径,将y坐标当做角,从而形成一个射线,而非笛卡尔坐标系布局。

# cluster.links(nodes)

指定节点数组,如以节点形式(nodes)返回的数组,返回对象节点表示每个节点中父节点同子节点之间的关系。叶节点没有任何关系。每个节点都是一个具有两个属性的对象:

  • source -父节点(如上述所示)。
  • target -子节点。

该方法在获取一组关系描述时很有效果,通常与对角(diagonal)图形生成器共同使用。例如:

svg.selectAll("path")
    .data(cluster.links(nodes))
  .enter().append("path")
    .attr("d", d3.svg.diagonal());

# cluster.children([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}
     ]
    }
   ]
  }
 ]
}

在分层中,子访问器在根节点首先被调用。如果访问器返回值为空,则该节点在布局遍历结束时被假定为叶节点。否则,访问器需要返回数据元素数组,来表示子节点。

# cluster.sort([comparator])

如已指定comparator,则使用指定的comparator函数设置布局中同级节点排序顺序。如comparator未指定,则返回当前分组的排序顺序,默认值为空。为每对节点,调用comparator函数。 comparator的默认值为空,此时采用三种遍历顺序,排序被禁用。例如,按照输入数据的字符串名对同层节点以降序顺序排序,即:

function comparator(a, b) {
  return d3.ascending(a.name, b.name);
}

See d3.ascending or d3.descending for details. 详见 d3.ascendingd3.descending.

# cluster.separation([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;
}

两个相邻节点ab传递到separation函数,且必须返回节点间期望的间距。节点通常是同级的,虽然,这些节点也可能属于相近关系(或更远的关系),如果布局将这些节点临近放置的话。

# cluster.size([size])

如果已经指定size,则将可用布局尺寸设定为指定的二元数组,以xy来表示。如果尺寸没有指定,则返回当前尺寸,默认值为1×1,如果nodeSize正在使用中,则默认值为空。虽然布局在x和y轴都有数值,但该坐标系可以是任意坐标系。例如,创建一个射线布局,其中树的广度(x)用角度来测量, 树的深度(y)表示半径r, 单位为像素,即 [360, r]。

# cluster.nodeSize([nodeSize])

如果nodeSize已经指定,以二元数组xy的形式返回每个节点的固定尺寸。如果nodeSize没有指定,则返回当前节点尺寸,默认值为空,表示布局尺寸总体固定,可以使用size来获得。

# cluster.value([value])

如果已经指定value,则用指定的函数设定值访问器。如果尚未指定value,则返回当前值访问器,默认值为空,表示值属性没有计算。指定之后,每次输入数据元,都会调用值访问器,并且必须返回一个用以表示节点数值的数字。该值对集群布局没有影响,但它是分层布局所提供的通用功能。


  • 张烁译 20140430
  • 咕噜校对 2014-11-30 10:42:08
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.