图相关

diagram.arc 弧长链接图

弧长链接图（Arc Diagram）可以变形为和弦图（Chord Diagram）。

alias: arc

具体用法见示例：

  1. dv.transform({
  2.   type: 'diagram.arc',
  3.   y: 0,
  4.   thickness: 0.05, // 节点高度，区间 (0, 1)
  5.   weight: false, // 是否带权重，无权重为弧长链接图，带权重为和弦图
  6.   marginRatio: 0.1, // 空隙比例，区间[0, 1)
  7.   id: node => node.id, // 获取节点id
  8.   source: edge => edge.source, // 获取边起始点id
  9.   target: edge => edge.target, // 获取边结束点id
  10.   sourceWeight: edge => edge.value, // 获取边起始点权重
  11.   targetWeight: edge => edge.value1, // 获取边结束点权重
  12.   sortBy: null, // 排序，可以按照id，权重（'weight'）或者边数量（'frequency'）排序，也可以自定排序函数
  13. });

注意！这个 Transform 做完之后，有两部分数据（顶点和边数据），G2 在使用是不能直接通过 chart.source(dv) 来导入数据，只能分别导入顶点和边集合，例如：

  1. const nodeView = chart.view();
  2. nodeView.source(dv.nodes);
  4. const edgeView = chart.view();
  5. edgeView.source(dv.edges);

diagram.sankey 桑基图

alias: sankey

具体用法见示例：

  1. dv.transform({
  2.   type: 'diagram.sankey',
  3.   value: node => node.value, // 权重
  4.   source: edge => edge.source, // 边起点id
  5.   target: edge => edge.target, // 边终点id
  6.   nodeAlign: 'sankeyJustify', // sankeyLeft / sankeyRight / sankeyCenter
  7.   nodeWidth: 0.02, // 节点宽，范围：(0, 1)
  8.   nodePadding: 0.02, // 节点上下间距，范围：(0, 1)
  9. });

注意！这个 Transform 做完后同样需要注意上述 arc transform 一样的数据导入问题

diagram.voronoi

voronoi 图

alias: voronoi

具体用法见示例：

  1. dv.transform({
  2.   type: 'diagram.voronoi',
  3.   fields: ['field0', 'field1'], // 对应坐标轴上的一个点
  4.   extend: [
  5.     [x0, y0],
  6.     [x1, y1],
  7.   ], // 范围
  8.   size: [width, height], // 范围
  9.   as: ['x', 'y'], // 每个点包围多边形的顶点集
  10.   // x: [ x0, x1, x2, ... ], y: [ y0, y1, y2, ... ]
  11. });