adaptor.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. import { __assign, __spreadArray } from "tslib";
  2. import { interaction, state, theme } from '../../adaptor/common';
  3. import { edge, polygon } from '../../adaptor/geometries';
  4. import { addViewAnimation, flow, getAllGeometriesRecursively, pick, transformDataToNodeLinkData } from '../../utils';
  5. import { chordLayout } from '../../utils/transform/chord';
  6. import { EDGE_COLOR_FIELD, NODE_COLOR_FIELD, X_FIELD, Y_FIELD } from './constant';
  7. function transformData(params) {
  8. // 将弦图数据放到ext中,nodeGeometry edgeGeometry使用
  9. var options = params.options;
  10. var data = options.data, sourceField = options.sourceField, targetField = options.targetField, weightField = options.weightField, nodePaddingRatio = options.nodePaddingRatio, nodeWidthRatio = options.nodeWidthRatio, _a = options.rawFields, rawFields = _a === void 0 ? [] : _a;
  11. // 将数据转换为node link格式
  12. var chordLayoutInputData = transformDataToNodeLinkData(data, sourceField, targetField, weightField);
  13. var _b = chordLayout({ weight: true, nodePaddingRatio: nodePaddingRatio, nodeWidthRatio: nodeWidthRatio }, chordLayoutInputData), nodes = _b.nodes, links = _b.links;
  14. // 1. 生成绘制node使用数据
  15. var nodesData = nodes.map(function (node) {
  16. return __assign(__assign({}, pick(node, __spreadArray(['id', 'x', 'y', 'name'], rawFields, true))), { isNode: true });
  17. });
  18. // 2. 生成 edge 使用数据 (同桑基图)
  19. var edgesData = links.map(function (link) {
  20. return __assign(__assign({ source: link.source.name, target: link.target.name, name: link.source.name || link.target.name }, pick(link, __spreadArray(['x', 'y', 'value'], rawFields, true))), { isNode: false });
  21. });
  22. return __assign(__assign({}, params), { ext: __assign(__assign({}, params.ext), {
  23. // 将chordData放到ext中,方便下面的geometry使用
  24. chordData: { nodesData: nodesData, edgesData: edgesData } }) });
  25. }
  26. /**
  27. * scale配置
  28. * @param params 参数
  29. */
  30. function scale(params) {
  31. var _a;
  32. var chart = params.chart;
  33. chart.scale((_a = {
  34. x: { sync: true, nice: true },
  35. y: { sync: true, nice: true, max: 1 }
  36. },
  37. _a[NODE_COLOR_FIELD] = { sync: 'color' },
  38. _a[EDGE_COLOR_FIELD] = { sync: 'color' },
  39. _a));
  40. return params;
  41. }
  42. /**
  43. * axis配置
  44. * @param params 参数
  45. */
  46. function axis(params) {
  47. var chart = params.chart;
  48. chart.axis(false);
  49. return params;
  50. }
  51. /**
  52. * legend配置
  53. * @param params 参数
  54. */
  55. function legend(params) {
  56. var chart = params.chart;
  57. chart.legend(false);
  58. return params;
  59. }
  60. /**
  61. * tooltip配置
  62. * @param params 参数
  63. */
  64. function tooltip(params) {
  65. var chart = params.chart, options = params.options;
  66. var tooltip = options.tooltip;
  67. chart.tooltip(tooltip);
  68. return params;
  69. }
  70. /**
  71. * coordinate配置
  72. * @param params 参数
  73. */
  74. function coordinate(params) {
  75. var chart = params.chart;
  76. chart.coordinate('polar').reflect('y');
  77. return params;
  78. }
  79. /**
  80. * nodeGeometry配置
  81. * @param params 参数
  82. */
  83. function nodeGeometry(params) {
  84. // node view
  85. var chart = params.chart, options = params.options;
  86. var nodesData = params.ext.chordData.nodesData;
  87. var nodeStyle = options.nodeStyle, label = options.label, tooltip = options.tooltip;
  88. var nodeView = chart.createView();
  89. nodeView.data(nodesData);
  90. // 面
  91. polygon({
  92. chart: nodeView,
  93. options: {
  94. xField: X_FIELD,
  95. yField: Y_FIELD,
  96. seriesField: NODE_COLOR_FIELD,
  97. polygon: {
  98. style: nodeStyle,
  99. },
  100. label: label,
  101. tooltip: tooltip,
  102. },
  103. });
  104. return params;
  105. }
  106. /**
  107. * edgeGeometry配置
  108. * @param params 参数
  109. */
  110. function edgeGeometry(params) {
  111. var chart = params.chart, options = params.options;
  112. var edgesData = params.ext.chordData.edgesData;
  113. var edgeStyle = options.edgeStyle, tooltip = options.tooltip;
  114. var edgeView = chart.createView();
  115. edgeView.data(edgesData);
  116. // edge
  117. var edgeOptions = {
  118. xField: X_FIELD,
  119. yField: Y_FIELD,
  120. seriesField: EDGE_COLOR_FIELD,
  121. edge: {
  122. style: edgeStyle,
  123. shape: 'arc',
  124. },
  125. tooltip: tooltip,
  126. };
  127. edge({
  128. chart: edgeView,
  129. options: edgeOptions,
  130. });
  131. return params;
  132. }
  133. function animation(params) {
  134. var chart = params.chart, options = params.options;
  135. var animation = options.animation;
  136. addViewAnimation(chart, animation, getAllGeometriesRecursively(chart));
  137. return params;
  138. }
  139. /**
  140. * 弦图适配器
  141. * @param chart
  142. * @param options
  143. */
  144. export function adaptor(params) {
  145. // flow 的方式处理所有的配置到 G2 API
  146. return flow(theme, transformData, coordinate, scale, axis, legend, tooltip, edgeGeometry, nodeGeometry, interaction, state, animation)(params);
  147. }
  148. //# sourceMappingURL=adaptor.js.map