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

古城微笑少年丶 2021-11-11 08:34 791阅读 0赞

**上一篇： 多符号散点图 https://blog.csdn.net/zjw\_python/article/details/98483989**

**下一篇： 雷达图 https://blog.csdn.net/zjw\_python/article/details/98486655**

**代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw\_python/article/details/98182540**

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

## 1 图表效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70]

## 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()
                            .domain([0, d3.max(data, (d) => d.r)])
                            .range([0, config.pointMaxSize]);

**为了使数据点的形状美观，我们定义了一个径向渐变**

/* ----------------------------定义颜色径向渐变------------------------ */
        chart.defRadialGrad = function(){ 
            const radialGrad = chart.svg()
                                    .append('defs')
                                    .append('radialGradient')
                                    .attr('id', 'bubble-fill')
                                    .attr('cx', 0.4)
                                    .attr('cy', 0.4);
    
    
                  radialGrad.append('stop')
                            .attr('offset', '0%')
                            .attr('stop-color', config.pointCenterColor);
                    
                  radialGrad.append('stop')
                            .attr('offset', '100%')
                            .attr('stop-color', config.pointEdgeColor);
    
        }

**渲染数据点，应用镜像渐变，步骤简单，对数据点的属性`r`应用过渡动画**

/* ----------------------------渲染数据点------------------------ */
        chart.renderPoints = function(){ 
            let points = chart.body().selectAll('.point')
                        .data(data);
    
                points.enter()
                        .append('circle')
                        .classed('point', true)
                    .merge(points)
                        .attr('cx', (d) => chart.scaleX(d.x))
                        .attr('cy', (d) => chart.scaleY(d.y))
                        .attr('r', 0)
                        .attr('fill', 'url(#bubble-fill)')
                        .transition().duration(config.animateDuration)
                        .attr('r', (d) => chart.scaleSize(d.r));
                
                points.exit()
                        .remove();
        }

**接着使渲染坐标轴、文本标签和网格线等常规步骤**

/* ----------------------------渲染坐标轴------------------------ */
        chart.renderX = function(){ 
            chart.svg().insert('g','.body')
                    .attr('transform', 'translate(' + chart.bodyX() + ',' + (chart.bodyY() + chart.getBodyHeight()) + ')')
                    .attr('class', 'xAxis')
                    .call(d3.axisBottom(chart.scaleX));
        }
    
        chart.renderY = function(){ 
            chart.svg().insert('g','.body')
                    .attr('transform', 'translate(' + chart.bodyX() + ',' + chart.bodyY() + ')')
                    .attr('class', 'yAxis')
                    .call(d3.axisLeft(chart.scaleY));
        }
    
        chart.renderAxis = function(){ 
            chart.renderX();
            chart.renderY();
        }
    
        /* ----------------------------渲染文本标签------------------------ */
        chart.renderText = function(){ 
            d3.select('.xAxis').append('text')
                                .attr('class', 'axisText')
                                .attr('x', chart.getBodyWidth())
                                .attr('y', 0)
                                .attr('fill', config.textColor)
                                .attr('dy', 30)
                                .text('X');
    
            d3.select('.yAxis').append('text')
                                .attr('class', 'axisText')
                                .attr('x', 0)
                                .attr('y', 0)
                                .attr('fill', config.textColor)
                                .attr('dx', '-30')
                                .attr('dy', '10')
                                .text('Y');
        }
    
        /* ----------------------------渲染网格线------------------------ */
        chart.renderGrid = function(){ 
            d3.selectAll('.yAxis .tick')
                .each(function(d, i){ 
                    if (config.ShowGridY.indexOf(d) > -1){ 
                        d3.select(this).append('line')
                            .attr('class','grid')
                            .attr('stroke', config.gridColor)
                            .attr('x1', 0)
                            .attr('y1', 0)
                            .attr('x2', chart.getBodyWidth())
                            .attr('y2', 0);
                    }
                });
    
            d3.selectAll('.xAxis .tick')
                .each(function(d, i){ 
                    if (config.ShowGridX.indexOf(d) > -1){ 
                        d3.select(this).append('line')
                            .attr('class','grid')
                            .attr('stroke', config.gridColor)
                            .attr('x1', 0)
                            .attr('y1', 0)
                            .attr('x2', 0)
                            .attr('y2', -chart.getBodyHeight());
                    }
                });
        }

**最后绑定鼠标交互事件，鼠标悬停时数据点半径增大**

/* ----------------------------绑定鼠标交互事件------------------------ */
        chart.addMouseOn = function(){ 
            //防抖函数
            function debounce(fn, time){ 
                let timeId = null;
                return function(){ 
                    const context = this;
                    const event = d3.event;
                    timeId && clearTimeout(timeId)
                    timeId = setTimeout(function(){ 
                        d3.event = event;
                        fn.apply(context, arguments);
                    }, time);
                }
            }
    
            d3.selectAll('.point')
                .on('mouseover', function(d){ 
                    const e = d3.event;
                    const position = d3.mouse(chart.svg().node());
                    e.target.style.cursor = 'hand'
    
                    d3.select(e.target)
                        .attr('r', chart.scaleSize(d.r) + 5);
                    
                    chart.svg()
                        .append('text')
                        .classed('tip', true)
                        .attr('x', position[0]+5)
                        .attr('y', position[1])
                        .attr('fill', config.textColor)
                        .text('x: ' + d.x + ', y: ' + d.y);
                })
                .on('mouseleave', function(d){ 
                    const e = d3.event;
    
                    d3.select(e.target)
                        .attr('r', chart.scaleSize(d.r));
                        
                    d3.select('.tip').remove();
                })
                .on('mousemove', debounce(function(){ 
                        const position = d3.mouse(chart.svg().node());
                        d3.select('.tip')
                        .attr('x', position[0]+5)
                        .attr('y', position[1]-5);
                    }, 6)
                );
        }

# 大功告成！！！ #

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70]: /images/20211109/5715e497386e474ea542f3347138377e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20211109/7dd0307307d44a268757bb75e86249ca.png