D3.js实现散点图和气泡图的方法详解

前言

小编之前已经跟大家分享过了《》和《》这两篇文章，已经介绍过柱状图和折线图了。下面就来说说和这两种非常相似的图表——散点图和气泡图。有需要的朋友们可以参考学习。

散点图和气泡图的实现

还是和之前一样，我们先把简单的画图框架搭起来，添加SVG画布：

rush:xhtml;"> <Meta charset="UTF-8">

散点图和气泡图虽然在展现意义上是不同的，但从技术实现的角度来讲，它们还是很类似的，都是由坐标轴和一个个的圆所组成的。

散点图

坐标轴的实现

为了实现真实的效果，散点图和气泡图我们使用不同的模拟数据。与折线图同理，散点图的各点的坐标的关系在坐标轴上的关系是连续的，所以它的x轴和y轴都使用线性比例尺（线性比例尺和序数比例尺的区别参见《方法详解》）。

rush:js;"> // 模拟数据 var dataset = [[161.2,51.6],[167.5,59.0],[159.5,49.2],[157.0,63.0],[155.8,53.6],[170.0,[159.1,47.6],[166.0,69.8],[176.2,66.8],[160.2,75.2],[172.5,55.2],[170.9,54.2],[172.9,62.5],[153.4,42.0],[160.0,50.0],[147.2,49.8],[168.2,[175.0,73.2],47.8],[167.6,68.8],50.6],82.5],[166.8,57.2],[176.5,87.8],[170.2,72.8],[174.0,54.5],[173.0,59.8],[179.9,67.3],[170.5,67.8],47.0],[154.4,46.2],[162.0,55.0],83.0],54.4],[152.0,45.8],[162.1,52.1],[161.3,67.9],[166.4,56.6],[168.9,62.3],[163.8,58.5],50.2],60.3],58.3],[165.1,56.2],72.9],[157.5,61.0],[160.7,69.1],[163.2,55.9],[152.4,46.5],54.3],[168.3,54.8],[180.3,60.7],[165.5,60.0],[165.0,62.0],[164.5,[156.0,52.7],74.3],[163.0,[165.7,73.1],[161.0,80.0],54.7],53.2],75.7],[172.7,61.1],55.7],[151.1,48.7],52.3],[163.5,59.3],[169.0,[164.0,[161.2,[155.0,45.9],70.6],67.2],69.4],[162.5,58.2],[170.3,64.8],[164.1,71.6],[169.5,52.8],[154.5,49.0],[159.8,[173.2,69.2],[161.4,63.4],[166.2,58.6],[159.4,45.7],52.2],[159.0,48.6],[162.8,57.8],55.6],[179.8,[162.9,59.4],53.4],69.0],58.4],[171.8,[178.0,[164.3,72.0],[168.5,65.2],105.2],51.8],[169.4,[167.8,45.0],54.0],[162.2,60.2],[149.5,44.8],58.8],56.4],[156.5,53.8],[160.9,58.0],[167.0,43.2],60.5],[158.2,46.4],64.4],48.8],[167.1,62.2],[158.0,55.5],54.6],59.2],[173.4,64.5],[159.2,56.0],63.6],[162.6,63.2],59.5],56.8],64.1],72.3],60.4],84.5],[158.8,69.5],76.4],61.4],65.9],[156.2,[175.2,[172.1,59.1],[182.9,81.8],70.7],[177.8,[175.3,72.7],[154.9,54.1],49.1],75.9],57.3],65.5],62.7],53.9],73.6],70.5],47.3],67.7],80.9],60.9],86.3],66.4],57.7],55.4],104.1],77.3],80.5],[171.4,[149.9,46.8],75.5],68.2],76.8],71.8],[164.4,67.3] ]; // 创建x轴的比例尺 var xScale = d3.scale.linear() .domain([140,190]) .range([0,width - padding.left - padding.right]); // 创建y轴的比例尺 var yScale = d3.scale.linear() .domain([40,120]) .range([height - padding.top - padding.bottom,0]); // 创建x轴 var xAxis = d3.svg.axis() .scale(xScale) .orient('bottom'); // 创建y轴 var yAxis = d3.svg.axis() .scale(yScale) .orient('left'); // 把x轴应用到对应的SVG元素上 main.append('g') .attr('class','axis') .attr('transform','translate(0,' + (height - padding.top - padding.bottom) + ')') .call(xAxis); // 把y轴应用到对应的SVG元素上 main.append('g') .attr('class','axis') .call(yAxis);

同折线图的坐标轴的实现是相同的，先用d3.scale.linear()创建比例尺，再用d3.svg.axis()创建坐标轴并且设置对应的比例尺，最后添加SVG元素并“绑定”坐标轴到其上，就可以看到完成以后的坐标轴。注意这里需要对移动SVG元素，使它们在视觉上组装成一个坐标系（但实际上它们在位置上是零散的，并没有很强的关系）。

散点的实现

在图表中一般点都是通过画圆来实现的，当圆的半径足够小的时候，它就是点。

rush:js;"> // 添加散点 main.selectAll('.point') .data(dataset) .enter() .append('circle') .attr('class','point') .attr('cx',function(d) { return xScale(d[0]); }) .attr('cy',function(d) { return yScale(d[1]); }) .attr('r',5);

与折线图添加点的方式是一样的。在main元素中选择到所有的圆先“占位”（因为此时选择到的是一个空的集合，只是这个集合代表main中所有的圆），然后绑定dataset到此集合上，通过enter()和append()搭配使用添加新的circle元素直到集合元素个数与dataset子元素个数相同为止。用比例尺计算出各圆的坐标并对其相关属性进行赋值，就完成了点的添加。因为散点图的点有点多，为了图表更加美观，给圆设置一下样式。

rush:js;"> .point { fill: #2ec7c9; fill-opacity: 0.5; }

最后，散点图长这样。

气泡图

坐标轴的实现

因为只有模拟的数据结构不同，实现原理都是类似的，这里就不再赘述，直接上代码。

rush:js;"> // 模拟数据 var dataset = [ { x: 69,y: 45,weight: 5 },{ x: 30,y: 37,weight: 10 },{ x: 43,y: 10,weight: 23 },{ x: 54,y: 48,weight: 41 },{ x: 18,y: 18,{ x: 88,y: 21,weight: 32 },{ x: 45,weight: 12 },{ x: 14,y: 32,weight: 9 },{ x: 78,weight: 16 },{ x: 13,weight: 32 } ]; // 添加x轴和y轴 var xScale = d3.scale.linear() .domain([0,100]) .range([0,width - padding.left - padding.right]); var yScale = d3.scale.linear() .domain([0,50]) .range([height - padding.top - padding.bottom,0]); var xAxis = d3.svg.axis() .scale(xScale) .orient('bottom'); var yAxis = d3.svg.axis() .scale(yScale) .orient('left');

气泡的实现

rush:js;"> // 添加气泡 main.selectAll('.bubble') .data(dataset) .enter() .append('circle') .attr('class','bubble') .attr('cx',function(d) { return xScale(d.x); }) .attr('cy',function(d) { return yScale(d.y); }) .attr('r',function(d) { return d.weight; });

最后的气泡图是长这样的。

总结

以上就是利用D3.js实现散点图和气泡图的全部内容，希望这篇文章对大家的学习和工作能有所帮助。小编还会陆续更新关于D3.js的文章，请大家继续关注编程之家，如果有疑问大家可以留言交流。

原文地址：https://www.jb51.cc/js/45682.html