antvis/G2

桑基图排序问题 #5404

lxwpanda posted onGitHub

image

问题: 其他应该在火炬燃烧的上面 原因: 右侧节点整个占比高度的计算是value+nodePaddingRatio值,nodePaddingRatio设置为0之后排序显示正确 建议: 计算时去掉nodePaddingRatio的值 数据:

    {
        "source": "范围一",
        "value": "2675.49",
        "target": "化石燃烧"
    },
    {
        "source": "化石燃烧",
        "value": "1179.67",
        "target": "转炉煤气"
    },
    {
        "source": "化石燃烧",
        "value": "648.66",
        "target": "天然气"
    },
    {
        "source": "化石燃烧",
        "value": "398.00",
        "target": "无烟煤"
    },
    {
        "source": "化石燃烧",
        "value": "281.63",
        "target": "焦炭"
    },
    {
        "source": "化石燃烧",
        "value": "67.85",
        "target": "高炉煤气"
    },
    {
        "source": "化石燃烧",
        "value": "99.68",
        "target": "其他"
    },
    {
        "source": "范围一",
        "value": "4573.45",
        "target": "火炬燃烧 "
    },
    {
        "source": "火炬燃烧 ",
        "value": "4573.45",
        "target": "火炬燃烧"
    },
    {
        "source": "范围一",
        "value": "129.11",
        "target": "CH₄逃逸"
    },
    {
        "source": "CH₄逃逸",
        "value": "129.06",
        "target": "CH₄井工"
    },
    {
        "source": "CH₄逃逸",
        "value": "0.02",
        "target": "CH₄露天"
    },
    {
        "source": "CH₄逃逸",
        "value": "0.03",
        "target": "CH₄矿后"
    },
    {
        "source": "范围一",
        "value": "3902.49",
        "target": "CO₂逃逸 "
    },
    {
        "source": "CO₂逃逸 ",
        "value": "3902.49",
        "target": "CO₂逃逸"
    },
    {
        "source": "范围二",
        "value": "99.00",
        "target": "购入净电 "
    },
    {
        "source": "购入净电 ",
        "value": "99.00",
        "target": "购入净电"
    },
    {
        "source": "范围二",
        "value": "9.68",
        "target": "购入净热 "
    },
    {
        "source": "购入净热 ",
        "value": "9.68",
        "target": "购入净热"
    },
    {
        "source": "范围三",
        "value": "0",
        "target": ""
    }
];
  const dataWithIndex = [...DATA].map((item, index) => ({
    ...item,
    value: Number(item.value),
    index: item.source === "范围三" ? DATA.length : index,
    test:  Number(item.value) || 1,
    path: `${item.source} -> ${item.target}:${item.value}`

  }));
  const sortedData = dataWithIndex.sort((a, b) => a.index - b.index);

  const config = {
    data: sortedData,
    sourceField: 'source',
    targetField: 'target',
    weightField: 'test',
    nodeWidthRatio: 0.008,
    nodePaddingRatio: 0.02,
    rawFields: ['path'],
    tooltip: {
      customContent:(title,data) => {
        return <div style={{padding: '10px 0px'}}>{data?.[0]?.data?.path}</div>
      }
    },

  };

看看文档中的 nodeSort 配置,可以解决排序的问题。

posted by hustcc over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests