D3 二维图表的绘制系列（十四）气泡图

PAT-python-zjw

墨衍会员 · AI 创作全网分发码龄10年

关注

VIP免费原创最新推荐文章于 2026-09-09 11:23:17 发布 3.6k 阅读 AI 写同款· GEO 优化 ›

D3系列第四弹——绘制气泡图 温故而知新阅读详情

上一篇：多符号散点图 https://blog.youkuaiyun.com/zjw_python/article/details/98483989

下一篇：雷达图 https://blog.youkuaiyun.com/zjw_python/article/details/98486655

代码结构和初始化画布的Chart对象介绍，请先看 https://blog.youkuaiyun.com/zjw_python/article/details/98182540

本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/master/src/scatterChart/bubbleChart

1 图表效果

在这里插入图片描述

2 数据

x,y,size
24,12,64
39,20,14
78,15,67
15,80,34
36,70,14
7,11,64
36,13,34
34,89,74
9,95,6
72,35,25
26,65,80
16,36,10
99,65,45
46,78,65
85,42,55
32,14,20
43,12,31
73,95,8
8,6,16
81,62,11

3 关键代码

导入数据

d3.csv('./data.csv', function(d){
   
   
    return {
   
   
        x: +d.x,
        y: +d.y,
        r: +d.size
    };
}).then(function(data){
   
   
.....

一些样式参数配置

const config = {
   
   
        margins: {
   
   top: 80, left: 80, bottom: 50, right: 80},
        textColor: 'black',
        gridColor: 'gray',
        ShowGridX: [10, 20, 30, 40, 50, 60, 70 ,80, 90, 100],
        ShowGridY: [10, 20, 30, 40, 50, 60, 70 ,80, 90, 100],
        title: '气泡图',
        pointMaxSize: 20,
        hoverColor: 'white',
        animateDuration: 1000,
        pointCenterColor: 'white',
        pointEdgeColor: chart._colors(0)
    }

尺度转换，气泡图相比基础散点图，新增了一个数据点的大小作为新的维度

/* ----------------------------尺度转换------------------------  */
    chart.scaleX = d3.scaleLinear()
                    .domain([0, Math.ceil(d3.max(data, (d) => d.x)/10)*10])
                    .range([0, chart.getBodyWidth()]);
    
    chart.scaleY = d3.scaleLinear()
                    .domain([0, Math.ceil(d3.max(data, (d) => d.y)/10)*10])
                    .range([chart.getBodyHeight(), 0]);
    
    chart.scaleSize = d3.scaleLinear()
                        .