🐛[BUG]FlowAnalysisGraph组件折叠配置不能用

[UserRunway]

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

FlowAnalysisGraph 配置 markerCfg下面的collapsed为ture或者false都不能使关系图初始时为折叠形态。现在看貌似只能控制+-号的变化，并不能收起子分支

📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]

🏞 期望结果 [描述你原本期望看到的结果]

期望设置collapsed能够使用代码动态控制关系图的折叠和收起，而不是手动点击

💻 复现代码 [提供可复现的代码，仓库，或线上示例]

官网代码

import React from 'react';
import ReactDOM from 'react-dom';
import { FlowAnalysisGraph } from '@ant-design/charts';

const DemoFlowAnalysisGraph = () => {
  const data = {
    nodes: [
      {
        id: '0',
        value: {
          title: 'spmd1',
          items: [
            {
              text: '曝光UV',
              value: '1000万',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
              trend: '45.9%',
            },
            {
              text: '点击UV',
              value: '10万',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
              trend: '1.9%',
            },
          ],
        },
      },
      {
        id: '1',
        value: {
          title: '开通营销页1',
          items: [
            {
              text: '访问UV',
              value: '1000万',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
              trend: '45.9%',
            },
          ],
        },
      },
      {
        id: '2',
        value: {
          title: '开通营销页2',
          items: [
            {
              text: '访问UV',
              value: '1000万',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
              trend: '45.9%',
            },
          ],
        },
      },
      {
        id: '3',
        value: {
          title: '去向页面1',
          items: [
            {
              text: '访问UV',
              value: '1000万',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
              trend: '45.9%',
            },
          ],
        },
      },
      {
        id: '4',
        value: {
          title: '去向页面2',
          items: [
            {
              text: '访问UV',
              value: '1000万',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
              trend: '45.9%',
            },
          ],
        },
      },
    ],
    edges: [
      {
        source: '0',
        target: '1',
      },
      {
        source: '0',
        target: '2',
      },
      {
        source: '1',
        target: '3',
      },
      {
        source: '2',
        target: '4',
      },
    ],
  };

  const config = {
    data,
    nodeCfg: {
      size: [180, 30],
      items: {
        padding: 6,
        containerStyle: {
          fill: '#fff',
        },
      },
      customContent: (item, group, cfg) => {
        const { startX, startY, width } = cfg;
        const { text, value, icon, trend } = item;
        text &&
          group?.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: startX,
              y: startY,
              text,
              fill: '#aaa',
            },
            // group 内唯一字段
            name: `text-${Math.random()}`,
          });
        value &&
          group?.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: startX + 60,
              y: startY,
              text: value,
              fill: '#000',
            },
            name: `value-${Math.random()}`,
          });
        icon &&
          group?.addShape('image', {
            attrs: {
              x: startX + 100,
              y: startY,
              width: 8,
              height: 10,
              img: icon,
            },
            name: `image-${Math.random()}`,
          });
        trend &&
          group?.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: startX + 110,
              y: startY,
              text: trend,
              fill: '#f00',
            },
            name: `value-${Math.random()}`,
          });

        // 行高
        return 14;
      },
      nodeStateStyles: {
        hover: {
          stroke: '#1890ff',
          lineWidth: 2,
        },
      },
      title: {
        containerStyle: {
          fill: 'transparent',
        },
        style: {
          fill: '#000',
          fontSize: 12,
        },
      },
      style: {
        fill: '#E6EAF1',
        stroke: '#B2BED5',
        radius: [2, 2, 2, 2],
      },
    },
    edgeCfg: {
      label: {
        style: {
          fill: '#aaa',
          fontSize: 12,
          fillOpacity: 0.5,
        },
      },
      edgeStateStyles: {
        hover: {
          stroke: '#1890ff',
          lineWidth: 2,
        },
      },
    },
    markerCfg: (cfg) => {
      const { edges } = data;
      return {
        position: 'right',
        show: edges.find((item) => item.source === cfg.id),
        collapsed: false, 
       //collapsed: true，
      };
    },
    layout: {
      ranksepFunc: () => 30,
      nodesepFunc: () => 30,
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
  };

  return <FlowAnalysisGraph {...config} />;
};

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

© 版本信息

• ant-design-charts 版本: [e.g. 0.9.0]
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息 [如截图等其他信息可以贴在这里]

希望引起重视！！感谢

[xiahller]

是的，没法控制子节点展开和折叠。而且当level设置了前几层，后几层的markerCfg里都无法得到外部传入的数据，

[garlicsuper]

这个有什么办法解决没？

[garlicsuper]

我也遇到了相同的问题

[lxfu1]

这个问题之前已经解决了，参考配置如下：

  const level = 3
  const config = {
    data,
    autoFit: false,
    level,
    nodeCfg: {
      getChildren,
    },
    markerCfg: (cfg) => {
      const { children, g_level } = cfg;
      return {
        show: true,
        collapsed: g_level >= level - 1 || !children?.length,
      };
    },
  };

https://charts.ant.design/zh/examples/relation-graph/decomposition-tree-graph#async-load

[lxfu1]

markerCfg 最初的目的确实只是为了展示marker使用，如果有默认折叠需求，建议使用 level，随后会更新 FlowAnalysisGraph 的level 功能。