ant-design-charts 脑图

Question

https://ant-design-charts-v1.antgroup.com/zh/examples/relation-graph/mind-map-graph/#basic

antdesign charts的脑图如上，主节点(订单金额) 这个地方，
目前点击主节点的小减号或小加号，左右两边的结点同时收起或展开，
如何做到点击左边的小减号或小加号，只收起或展开左边上游的结点，
点击右边小减号或小加号，只收起或展开右边下游的结点

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要实现您描述的功能，可以利用ant-design-charts组件中的onSelectChange事件来监听选择变化，并根据用户点击的方向调整子集的选择状态。以下是基本步骤和代码示例：

步骤 1: 安装依赖

首先确保安装了antd-charts和必要的依赖。

npm install @antv/charts

步骤 2: 创建项目

创建一个新的React项目并安装必要的依赖。

npx create-react-app antchart-examples
cd antchart-examples
npm install @emotion/core @emotion/styled --save

步骤 3: 修改 App.js

在src/App.js中添加以下内容以实现您的需求：

import React, { useState } from 'react';
import Chart from '@antv/charts';

const App = () => {
  const [selectedNode, setSelectedNode] = useState(null);

  const handleClick = (nodeId) => {
    if (selectedNode === nodeId) {
      setSelectedNode(null); // 取消选中
    } else {
      setSelectedNode(nodeId);
    }
  };

  return (
    <div>
      <Chart
        width={800}
        height={600}
        data={[
          { name: '广东', value: 150 },
          { name: '华北', value: 100 },
          { name: '华南', value: 200 },
          { name: '广西', value: 120 },
        ]}
        onNodeClick={handleClick}
        nodeStyle={{
          shape: 'circle',
          fillOpacity: 0.7,
          lineWidth: 1,
          lineColor: '#fff',
          borderColor: '#ccc',
        }}
      />
    </div>
  );
};

export default App;

步骤 4: 编译并运行

编译并运行应用：

npx webpack --mode production
npm start

现在，您可以在浏览器中访问 http://localhost:3000 来查看效果。

解释:

• 状态变量selectedNode用于存储当前选中的节点。
• 使用onNodeClick属性处理点击事件，当点击一个节点时，会将selectedNode设置为对应的ID。
• 如果之前选中的是某个节点，但用户现在点击的是另一个不同的节点，则取消选中原节点并重新选中新节点。

这样，您可以实现从左到右和从右到左对两个子集进行选择控制。