d3.layout.chord() 分析

源码:

var τ = 2 * Math.PI;
d3.layout.chord = function() {
    var chord = {}, chords, groups, matrix, n, padding = 0, sortGroups, sortSubgroups, sortChords;
    function relayout() {
      var subgroups = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j;
      chords = [];
      groups = [];
      k = 0, i = -1;
      while (++i < n) {
        x = 0, j = -1;
        while (++j < n) {
          x += matrix[i][j];
        }
        groupSums.push(x);
        subgroupIndex.push(d3.range(n));
        k += x;
      }
      if (sortGroups) {
        groupIndex.sort(function(a, b) {
          return sortGroups(groupSums[a], groupSums[b]);
        });
      }
      if (sortSubgroups) {
        subgroupIndex.forEach(function(d, i) {
          d.sort(function(a, b) {
            return sortSubgroups(matrix[i][a], matrix[i][b]);
          });
        });
      }    //k运算之前为matrix的所有取值的和,运算之后为单位1数字所表示的角度值
      k = (τ - padding * n) / k;
      x = 0, i = -1;
      while (++i < n) {
        x0 = x, j = -1;
        while (++j < n) {
          var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj], a0 = x, a1 = x += v * k;
          subgroups[di + "-" + dj] = {
            index: di,
            subindex: dj,
            startAngle: a0,
            endAngle: a1,
            value: v
          };
        }
        groups[di] = {
          index: di,
          startAngle: x0,
          endAngle: x,
          value: (x - x0) / k
        };
        x += padding;
      }
      i = -1;
      while (++i < n) {
        j = i - 1;
        while (++j < n) {
          var source = subgroups[i + "-" + j], target = subgroups[j + "-" + i];
          if (source.value || target.value) {
            chords.push(source.value < target.value ? {
              source: target,
              target: source
            } : {
              source: source,
              target: target
            });
          }
        }
      }
      if (sortChords) resort();
    }
    function resort() {
      chords.sort(function(a, b) {
        return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2);
      });
    }
    chord.matrix = function(x) {
      if (!arguments.length) return matrix;
      n = (matrix = x) && matrix.length;
      chords = groups = null;
      return chord;
    };
    chord.padding = function(x) {
      if (!arguments.length) return padding;
      padding = x;
      chords = groups = null;
      return chord;
    };
    chord.sortGroups = function(x) {
      if (!arguments.length) return sortGroups;
      sortGroups = x;
      chords = groups = null;
      return chord;
    };
    chord.sortSubgroups = function(x) {
      if (!arguments.length) return sortSubgroups;
      sortSubgroups = x;
      chords = null;
      return chord;
    };
    chord.sortChords = function(x) {
      if (!arguments.length) return sortChords;
      sortChords = x;
      if (chords) resort();
      return chord;
    };
    chord.chords = function() {
      if (!chords) relayout();
      return chords;
    };
    chord.groups = function() {
      if (!groups) relayout();
      return groups;
    };
    return chord;
  };

d3.layout.chord()

构建新的弦布局。在默认情况下,输入数据并未分类,并且各群组之间没有填充。和其他布局不同,该弦布局并不是应用于数据的函数;相反,数据通过设置关联矩阵来指定,通过chords和groups访问器检索。

chord.matrix([matrix])

指定矩阵之后,设定该布局用到的输入数据矩阵。如果没有指定矩阵,返回当前数据矩阵,默认为未定义。输入矩阵的数字必须为“方形矩阵” :[[11975,5871,8916,2868], [1951,10048,2060,6171], [8010,16145,8090,8045], [1013,990,940,6907]]

矩阵的每一行对应一个特定分组,如上文所述某个发色。矩阵中每一列i同第i行相对应;每个单元格ij对应表示第i组到第j组之间的关系。

chord.padding([padding])

If padding is specified, sets the angular padding between groups to the specified value inradians. If padding is not specified, returns the current padding, which defaults to zero. You may wish to compute the padding as a function of the number of groups (the number of rows or columns in the associated matrix). 指定填充之后,在不同组之间设定角度填充,为指定的值(弧度为单位)。如果没有指定填充,返回当前填充,默认值为0。你可能希望计算填充是分组数量(关联矩阵中行和列的数量)的函数。

chord.sortGroups([comparator])

如果已经指定comparator,使用指定comparator函数为布局设定分组(行)的排列顺序。为每两行调用comparator函数,传递的入参是行i和行j的总和。通常,需要将comparator按照d3.ascending或d3.descending进行指定。如果没有指定comparator,则返回当前分组排列顺序,该顺序默认值为空。

chord.sortSubgroups([comparator])

如果已经指定comparator,使用指定comparator函数为布局设定分组(行内各列)的排列顺序。为每对单元格调用comparator函数,值为各单元格的值。通常,需要将comparator以升序或降序进行指定。如果没有指定comparator,则回当前子分组排列顺序,该顺序默认值为空。

chord.sortChords([comparator])

如果已经指定comparator,运用指定comparator函数为弦布局设定弦(Z顺序)的排列顺序。为每两条弦调用comparator函数,入参为源单元格和目标单元格的最小值。通常,要将comparator以升序或降序进行指定。如果没有指定comparator,返回当前chord排列顺序,默认值为空。

chord.chords()

给定布局的当前配置和关联矩阵,返回计算过的弦对象。如果弦对象已计算完毕,本方法返回缓存值。如果布局属性有任何改变,则清空之前计算的弦。此时,如果下次调用该方法,需要对布局进行重新计算。返回对象具有下列属性: ? source -描述源对象。 ? target -描述目标对象。 这两个对象描述下列实体: ? index -行索引,i。 ? subindex索引-列索引,j。 ? startAngle-弧的起始角,在radians内。 ? endAngle-弧的终止角,在radians内。 ? value -关联单元格ij的数值。 需要注意的是,这些对象同弦很方便为弦生成器匹配默认的访问器;但仍可以对访问器进行重写或者修改返回对象,实现布局微调。

chord.groups()

给定布局的当前配置和关联矩阵,返回计算过的分组对象。如果分组对象已计算完毕,本方法返回缓存值。如果布局属性有任何改变,则清空之前计算的分组。此时,如果下次调用该方法,需要对布局进行重新计算。返回对象具有下列属性: ? index -行索引,i。 ? startAngle -弧的起始角,在radians内。 ? endAngle -弧的终止角,在radians内。 ? value -相关行 i的值的总和。 需要注意的是,这些对象同弧度生成器的默认访问器具有较好的吻合度;但仍可以对访问器进行重写或者修改返回对象,实现布局微调。

时间: 2024-10-10 12:41:49

d3.layout.chord() 分析的相关文章

D3.js数据可视化(二)——绘制弦图(Chord Layout)

树图网可视化实验 1. 实验要求 要求通过树,或者图.网的可视化聚类,分析某个公司的邮件社交网络.根据要求设计可视化方案,并利用D3工具实现可视化效果. 2. 过程 2.1. 可视化方案的设计思路 2.1.1. 可视化要求 1) 可视化该邮件社交网络. 2) 该可视化中的每个Edge都对应着一个权重(Emails per month或者weight),要求将该权重属性映射到一个图形化的属性,比如,color,types of line,size or shapes. 3) 可视化方案中要体现每个

【 D3.js 入门系列 --- 9.3 】 弦图生产

我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.例如以下图: 两点之间的连线表示.谁和谁具有联系: 线的粗细表示权重: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpobHp6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/S

【 D3.js 入门系列 --- 9.3 】 弦图的制作

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.如下图: 两点之间的连线表示,谁和谁具有联系: 线的粗细表示权重: 上面的介绍源于: http://circos.ca/guide/tables/  ,我就不详细介绍了,还是很好理解的. 那么在 D3 中怎么用 layout 转换出弦图所需要的数据,并作图呢?请耐心往下看. 1. 首先给出数据 var ci

【D3 API 中文手册】提交记录

[D3 API 中文手册]提交记录 声明:本文仅供学习所用,未经作者允许严禁转载和演绎 <D3 API 中文手册>是D3官方API文档的中文翻译.始于2014-3-23日,基于VisualCrew小组的六次协作任务之上,目前已经大致翻译完毕,将陆续向官网提交D3 API 中文版. 本文主要内容有: 列举初版翻译/校对人员列表 记录中文翻译的官网提交情况 提供校对联系方式 提供D3 API简版翻译 翻译/校对人员列表 翻译人员列表 API项目 文档页数 单词数 翻译 校对 core.select

D3js-API介绍【中】

JavaScript可视化图表库D3.js API中文參考,d3.jsapi D3 库所提供的全部 API 都在 d3 命名空间下.d3 库使用语义版本号命名法(semantic versioning). 你能够用 d3.version 查看当前的版本号信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 加

D3js-API介绍【英】

Everything in D3 is scoped under the d3 namespace. D3 uses semantic versioning. You can find the current version of D3 as d3.version. See one of: Behaviors - reusable interaction behaviors Core - selections, transitions, data, localization, colors, e

【D3】cluster layout

一. 和其他D3类一样,layout 可以链式传递,使用简明的申明添加多种自定义设置. 二.API # d3.layout.cluster() Creates a new cluster layout with the default settings: the default sort order is null; the default children accessor assumes each input data is an object with a children array;

d3js layout 深入理解

D3 layouts help you create more advanced visualisations such as treemaps: D3 layouts帮助您创造更加高级复杂的可视化图表,比如treemaps,packed circles,network graphs: Layout is just a JavaScript function that takes your data as input and adds visual variables such as posit

【 D3.js 高级系列 — 4.0 】 矩阵树图

矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映. 许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. 图1  http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/ 现以浙江.广西.江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图. 1. 数据 新建一个citygdp.