为了提高出图效率，我做了一款可视化制作气泡图谱的小工具

概述

徐小夕介绍了基于实际需求开发的小工具——BubbleMap，旨在解决公司运营部门在更新气泡图数据时对研发人员的依赖问题。

开发背景

在公司负责图表开发时，徐小夕注意到气泡图需求频繁，导致研发团队花费大量时间在基础任务上，而运营团队也感到不便。因此，徐小夕提出了一个可视化解决方案，允许运营人员自主管理气泡图的数据更新。

气泡图谱实现

BubbleMap工具的实现只需三步：气泡图谱实现、在线编辑数据和实时更新图表。通过不断的演算推理和实践，该工具已成功上线供免费使用。

实现思路

工具分为两部分：画布图表区和数据编辑区。画布图表区使用了Antv等开源库来展示图表效果。数据编辑区可以通过多种方式实现，包括可编辑表格组件（如antd的表格组件）、电子表格（如handsontable.js）和嵌套表单（使用antd的form组件或其他UI组件库）。徐小夕分享了嵌套表单的代码示例，展示了如何通过代码来构建数据编辑区。

气泡图的具体实现

对于气泡图，采用了antv/g6库。介绍了如何注册气泡节点并通过配置实现动态效果。代码示例说明了如何利用自定义节点的drawShape方法和其他相关函数实现气泡图的具体绘制过程。

你在测试金字塔的哪一层？（上）

了解更多

想要了解更多内容？

查看原文：为了提高出图效率，我做了一款可视化制作气泡图谱的小工具

文章来源：

趣谈前端

扫码关注公众号