| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- import { __assign, __spreadArray } from "tslib";
- import { interaction, state, theme } from '../../adaptor/common';
- import { edge, polygon } from '../../adaptor/geometries';
- import { addViewAnimation, flow, getAllGeometriesRecursively, pick, transformDataToNodeLinkData } from '../../utils';
- import { chordLayout } from '../../utils/transform/chord';
- import { EDGE_COLOR_FIELD, NODE_COLOR_FIELD, X_FIELD, Y_FIELD } from './constant';
- function transformData(params) {
- // 将弦图数据放到ext中,nodeGeometry edgeGeometry使用
- var options = params.options;
- 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;
- // 将数据转换为node link格式
- var chordLayoutInputData = transformDataToNodeLinkData(data, sourceField, targetField, weightField);
- var _b = chordLayout({ weight: true, nodePaddingRatio: nodePaddingRatio, nodeWidthRatio: nodeWidthRatio }, chordLayoutInputData), nodes = _b.nodes, links = _b.links;
- // 1. 生成绘制node使用数据
- var nodesData = nodes.map(function (node) {
- return __assign(__assign({}, pick(node, __spreadArray(['id', 'x', 'y', 'name'], rawFields, true))), { isNode: true });
- });
- // 2. 生成 edge 使用数据 (同桑基图)
- var edgesData = links.map(function (link) {
- 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 });
- });
- return __assign(__assign({}, params), { ext: __assign(__assign({}, params.ext), {
- // 将chordData放到ext中,方便下面的geometry使用
- chordData: { nodesData: nodesData, edgesData: edgesData } }) });
- }
- /**
- * scale配置
- * @param params 参数
- */
- function scale(params) {
- var _a;
- var chart = params.chart;
- chart.scale((_a = {
- x: { sync: true, nice: true },
- y: { sync: true, nice: true, max: 1 }
- },
- _a[NODE_COLOR_FIELD] = { sync: 'color' },
- _a[EDGE_COLOR_FIELD] = { sync: 'color' },
- _a));
- return params;
- }
- /**
- * axis配置
- * @param params 参数
- */
- function axis(params) {
- var chart = params.chart;
- chart.axis(false);
- return params;
- }
- /**
- * legend配置
- * @param params 参数
- */
- function legend(params) {
- var chart = params.chart;
- chart.legend(false);
- return params;
- }
- /**
- * tooltip配置
- * @param params 参数
- */
- function tooltip(params) {
- var chart = params.chart, options = params.options;
- var tooltip = options.tooltip;
- chart.tooltip(tooltip);
- return params;
- }
- /**
- * coordinate配置
- * @param params 参数
- */
- function coordinate(params) {
- var chart = params.chart;
- chart.coordinate('polar').reflect('y');
- return params;
- }
- /**
- * nodeGeometry配置
- * @param params 参数
- */
- function nodeGeometry(params) {
- // node view
- var chart = params.chart, options = params.options;
- var nodesData = params.ext.chordData.nodesData;
- var nodeStyle = options.nodeStyle, label = options.label, tooltip = options.tooltip;
- var nodeView = chart.createView();
- nodeView.data(nodesData);
- // 面
- polygon({
- chart: nodeView,
- options: {
- xField: X_FIELD,
- yField: Y_FIELD,
- seriesField: NODE_COLOR_FIELD,
- polygon: {
- style: nodeStyle,
- },
- label: label,
- tooltip: tooltip,
- },
- });
- return params;
- }
- /**
- * edgeGeometry配置
- * @param params 参数
- */
- function edgeGeometry(params) {
- var chart = params.chart, options = params.options;
- var edgesData = params.ext.chordData.edgesData;
- var edgeStyle = options.edgeStyle, tooltip = options.tooltip;
- var edgeView = chart.createView();
- edgeView.data(edgesData);
- // edge
- var edgeOptions = {
- xField: X_FIELD,
- yField: Y_FIELD,
- seriesField: EDGE_COLOR_FIELD,
- edge: {
- style: edgeStyle,
- shape: 'arc',
- },
- tooltip: tooltip,
- };
- edge({
- chart: edgeView,
- options: edgeOptions,
- });
- return params;
- }
- function animation(params) {
- var chart = params.chart, options = params.options;
- var animation = options.animation;
- addViewAnimation(chart, animation, getAllGeometriesRecursively(chart));
- return params;
- }
- /**
- * 弦图适配器
- * @param chart
- * @param options
- */
- export function adaptor(params) {
- // flow 的方式处理所有的配置到 G2 API
- return flow(theme, transformData, coordinate, scale, axis, legend, tooltip, edgeGeometry, nodeGeometry, interaction, state, animation)(params);
- }
- //# sourceMappingURL=adaptor.js.map
|