Skip to content

[Bug]: 桑基图排序问题 #2870

Open
@Erimus-Koo

Description

@Erimus-Koo

Describe the bug / 问题描述

I hope each node sorts according to its data order, but achieving this is challenging.
我希望每个节点都能按照数据顺序排列,但要做到这一点很有难度。

I used key.index, which worked on the target side, but the source side remains random. So there will be staggered lines as shown below.
我使用了 key.index,这在右侧输出端有效,但左侧来源端仍然是随机的。所以会出现交错的线条,如下图所示。

Image


I also tried it without custom sorting, by removing nodeSort, the staggered lines are gone, but the sorting becomes very irregular, not by name, not by occurrence order, related to value, but not simply positive or negative.
我还尝试了不用自定义排序,移除 nodeSort,交错的线条没有了,但排序变得很没规律,不是按照名字、也不是出现顺序,跟value有关,但并非简单的正序或倒序。

Image


Expected 期望表现

  • Ability to sort nodes on demand.

  • Do not overlap after sorting.

  • 能够按需对node排序。

  • 排序后连线不要出现交叉重叠。

Reproduction link / 复现链接

https://ant-design-charts.antgroup.com/examples/statistics/sankey/#node-sort-sankey

Steps to Reproduce the Bug or Issue / 重现步骤

在该页面使用如下配置项

import { Sankey } from '@ant-design/plots';
import React from 'react';
import ReactDOM from 'react-dom';

const colors = [
  '#39f',
  '#93f',
  '#f93',
  '#F33',
];

const data = [
  { source: 'S1', target: 'T1', value: 3 },
  { source: 'S2', target: 'T1', value: 3 },
  { source: 'S3', target: 'T1', value: 2.5 },
  { source: 'S1', target: 'T2', value: 3 },
  { source: 'S2', target: 'T2', value: 3 },
  { source: 'S3', target: 'T2', value: 2 },
  { source: 'S1', target: 'T3', value: 2 },
  { source: 'S3', target: 'T3', value: 2 },
  { source: 'S1', target: 'etc.', value: 6 },
  { source: 'S2', target: 'etc.', value: 6 },
  { source: 'S3', target: 'etc.', value: 1 },
];

const DemoSankey = () => {
  const config = {
    data,
    scale: { color: { range: colors } },
    layout: {
      nodeWidth: 0.01,
      nodeSort: (a, b) => {
        console.log(a, b)
        return a.index - b.index
        },
    },
    linkColorField: (d) => d.source.key,
    style: {
      labelFontSize: 20,
      linkFillOpacity: 0.25,
      nodeStrokeWidth: 0,
    },
  };
  return <Sankey {...config} />;
};

ReactDOM.render(<DemoSankey />, document.getElementById('container'));

Version / 版本

🆕 2.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

Metadata

Metadata

Assignees

No one assigned

    Labels

    waiting for maintainerTriage or intervention needed from a maintainer

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions