init()

in src/Wsankey/index.tsx [90:224]

• 119 lines of code
• 10 McCabe index (conditional complexity)

  init(chart: Chart, config: WsankeyConfig, data: any) {
    this.legendField = config?.primaryKey;
    const ds = new DataSet();
    const dv = ds.createView().source(data, {
      type: 'graph',
      edges: getEdges,
    });
    dv.transform({
      type: 'diagram.sankey',
      nodeId: (node) => {
        // console.log(node)
        // if (node?.sourceLinks?.length !== 0 || node?.targetLinks?.length !== 0) {
        if (config?.primaryKey) {
          return node?.[config?.primaryKey] ?? null;
        } else {
          return node?.index;
        }
        // }
      },
      value: (node) => node.value, // 权重
      source: (edge) => edge.source, // 边起点id
      target: (edge) => edge.target, // 边终点id
      sort: (a, b) => {
        if (a.value > b.value) {
          return 0;
        } else if (a.value < b.value) {
          return -1;
        }
        return 0;
      },
      ...config.nodeStyle,
    });

    this.sankeyDataView = dv;

    chart.axis(false);
    chart.scale({
      x: { sync: true },
      y: { sync: true },
      source: { sync: 'color' },
      name: { sync: 'color' },
    });

    rectTooltip(this, chart, config, {}, null, {
      showTitle: false,
      showMarkers: false,
      showCrosshairs: false,
      shared: false,
    });

    // 为了颜色映射
    const { edges, nodes } = transformData(dv);

    // edge view
    const edgeView = chart.createView();
    this.edgeView = edgeView;
    edgeView.data(edges);
    edgeView
      .edge()
      .position('x*y')
      .shape('arc')
      .color('name', config.colors)
      .tooltip('target*source*value', (target: string, source: string, value: number) => {
        if (typeof config.tooltip === 'boolean') {
          return null;
        } else {
          return (
            config.tooltip?.nameFormatter?.(target, source, value) || {
              name: source + ' to ' + target,
              value,
            }
          );
        }
      })
      .style('source*target', () => {
        return {
          lineWidth: 0,
          opacity: 0.1,
        };
      });

    // node view
    const nodeView = chart.createView();
    this.nodeView = nodeView;
    nodeView.data(nodes);

    const nodeGeom = nodeView
      .polygon()
      .position('x*y') // nodes数据的x、y由layout方法计算得出
      .color('name', config.colors)
      .tooltip(false)
      .style({
        stroke: 'transparent',
      });

    if (config.labels) {
      nodeGeom.label('x*name', (x, name) => {
        const isLast = x[1] === 1;
        return {
          style: {
            fill: themes['widgets-sankey-node-text'],
            textAlign: isLast ? 'end' : 'start',
          },
          offsetX: isLast
            ? -pxToNumber(themes['widgets-font-size-1'])
            : pxToNumber(themes['widgets-font-size-1']),
          content: name,
        };
      });
    }

    rectLegend(
      this,
      chart,
      {
        ...config,
        legend:
          config?.legend !== false
            ? {
                marker: {
                  style: {
                    stroke: 'rgba(0,0,0,0)',
                    r: 3,
                    lineWidth: 0,
                  },
                },
                ...config.legend,
              }
            : false,
      },
      {},
      'graph',
    );
    // chart.interaction('element-active');
  }