Description
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
,这在右侧输出端有效,但左侧来源端仍然是随机的。所以会出现交错的线条,如下图所示。
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有关,但并非简单的正序或倒序。
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 / 其他