D3 二维图表的绘制系列（十三）多符号散点图

谁借莪１个温暖的怀抱￠ 2021-11-11 08:22 269阅读 0赞

**上一篇： 基础散点图 https://blog.csdn.net/zjw\_python/article/details/98483109**

**下一篇： 气泡图 https://blog.csdn.net/zjw\_python/article/details/98485368**

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

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

## 1 图表效果 ##

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

## 2 数据 ##

x,y,x1,y1,x2,y2,x3,y3
    24,12,95,45,35,75,32,85
    39,20,74,62,82,24,34,46
    78,15,14,64,3,75,64,19
    15,80,32,67,45,62,84,39
    36,70,10,68,36,10,38,49
    7,11,67,2,67,14,34,20
    36,13,31,47,95,9,74,73
    34,89,34,75,5,98,3,2
    9,95,74,69,31,47,32,20
    72,35,26,65,16,36,99,65
    46,78,85,42,32,14,43,12
    73,95,8,6,81,62,10,95

## 3 关键代码 ##

**导入数据**

d3.csv('./data.csv', function(d){ 
        return { 
            x: +d.x,
            y: +d.y,
            x1: +d.x1,
            y1: +d.y1,
            x2: +d.x2,
            y2: +d.y2,
            x3: +d.x3,
            y3: +d.y3,
        };
    }).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: '多符号散点图',
            pointSize: 100,
            hoverColor: 'white',
            animateDuration: 1000
        }

**尺度转换，这里要注意，X和Y轴的最大值的计算**

/* ----------------------------尺度转换------------------------ */
        chart.scaleX = d3.scaleLinear()
                        .domain([0, Math.ceil(d3.max(data, (d) => getMaxNum(d,'x'))/10)*10])
                        .range([0, chart.getBodyWidth()]);
        
        chart.scaleY = d3.scaleLinear()
                        .domain([0, Math.ceil(d3.max(data, (d) => getMaxNum(d,'y'))/10)*10])
                        .range([chart.getBodyHeight(), 0]);
        
        //获取数据行最大x值或y值
        function getMaxNum(d, type){ 
            const nums = [];
            Object.keys(d).forEach((key) => { 
                if (key.indexOf(type) > -1) nums.push(d[key]);
            })
            return d3.max(nums);
        }

**渲染数据点，为方便数据绑定，我们先转换了一下数据的结构，渲染步骤跟基础散点图类似，区别在于我们使用`path`元素，通过`d3.symbol()`指定不同的数据点形状**

/* ----------------------------渲染数据点------------------------ */
        chart.renderPoints = function(){ 
            /* 改变数据结构，方便渲染 [ [[x,y],[x,y],...], [[x1,y1],[x1,y1],...], [[x2,y2],[x2,y2],...], [[x3,y3],[x3,y3],...], ] */
            const tempData = data.map((d) => { 
                const items = [];
                d3.permute(d, Object.keys(d)).forEach((item,i,array) => { 
                    if (i % 2 === 0){ 
                        items.push([array[i],array[i+1],i/2]);
                    }
                });
                return items;
            });
    
            const multiData = d3.zip.apply(this,tempData);
    
            let groups = chart.body().selectAll('.g')
                            .data(multiData);
    
            let points = groups.enter()
                                  .append('g')
                               .merge(groups)
                                  .attr('class', (d,i) => 'g points-' + i)
                                  .attr('fill', (d,i) => chart._colors(i))
                                  .selectAll('.point')
                                  .data((d) => d);
                
                groups.exit()
                        .remove();
    
                points.enter()
                        .append('path')
                        .classed('point', true)
                      .merge(points)
                        .attr('transform', (d) => 'translate(' + chart.scaleX(d[0]) + ',' + chart.scaleY(d[1]) + ')')
                        .attr('d', d3.symbol().type(function (d) { 
                            return d3.symbols[d[2]];
                        }).size(1))
                        .transition().duration(config.animateDuration)
                        .attr('d', d3.symbol().type(function (d) { 
                            return d3.symbols[d[2]];
                        }).size(config.pointSize));
                        
                
                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('fill', config.hoverColor);
                    
                    chart.svg()
                        .append('text')
                        .classed('tip', true)
                        .attr('x', position[0]+5)
                        .attr('y', position[1])
                        .attr('fill', config.textColor)
                        .text('x: ' + d[0] + ', y: ' + d[1]);
                })
                .on('mouseleave', function(d){ 
                    const e = d3.event;
                    
                    d3.select(e.target)
                        .attr('fill', chart._colors(d[2]));
                        
                    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/89c8aeb2e5e2454faa99644320da6dcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20211109/1098954d822d4580a74e79371efaefe3.png