12、使用 D3、React 构建可视化组件：世界地图与气泡图

使用 D3、React 构建可视化组件：世界地图与气泡图

在前端开发中，可视化组件的构建是展示数据的重要手段。本文将介绍如何使用 D3、React v17、Material - UI、Recoil 和 TypeScript 构建世界地图客户端列表小部件以及气泡图。

世界地图客户端列表小部件

首先，我们来构建一个世界地图客户端列表小部件，该小部件可以展示客户端列表，并通过旋转的世界地图进行可视化展示。

1. 定义接口

interface IClientListDetailProps {
  selectedItem: clientsObject
  setSelectedItem: Function
  data: clientsObject
  paddingTop: number
}

这个接口定义了 ClientListDetail 组件所需的属性，包括选中的项目、设置选中项目的函数、数据和顶部内边距。

2. ClientsWidget 组件

ClientsWidget 是父组件，它借助 Recoil 获取地图和客户端列表的数据，并将结果传递给子组件。使用 Material - UI 的网格组件来布局客户端列表和旋转的世界地图。

// src/widgets/ClientsWidget/ClientsWidget.tsx
imp