如何利用D3.js绘制一个简单的散点图

首先保证你的包中引入了d3.js文件，我这里用的是d3.v3.js这个版本

接下来可以开始写你的程序了

要在网页上绘制散点图，我们需要用到SVG(不清楚SVG概念的请点击 这里 学习)

1.定义画布

//这里我们随意定义一些散点坐标
var dataset = [[5,10],[10,8],[15,18],[20,11],[25,15],[30,20]];
//设定画布宽度
var width = 1500;
//画布高度
var height = 700;
//设置画布
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);

以上，我们的画布就定义完成了（关于 append( ) 的用法 和 attr( ) 的用法 自行学习）

那么，要在画布上画出散点图，我们需要用圆来表示这些散点

所以，接下来

2.定义点集

//申明圆集
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");

画布和圆都定义完成了，那么，接下来就可以开始我们的绘制了

3.圆点的绘制

//为申明的圆集设置参数
//定义圆心x坐标
circles.attr("cx",function (d,i) {
return d[0]*magnification;
})
//定义圆心y坐标
.attr("cy",function (d,i) {
return height - d[1]*magnification;
})
//设置圆的半径
.attr("r",function (d) {
return 25;
})
//设置圆的颜色
.attr("fill", "Salmon")

这里说明一下定义x和y坐标时使用的匿名函数 function ( d , i ) { }

d表示遍历的数据来源 dataset 中的每一项，i 表示第 i 项的序号

完整代码如下:

//散点坐标
var dataset = [[5,10],[10,8],[15,18],[20,11],[25,15],[30,20]];
//设定画布宽度
var width = 1500;
//画布高度
var height = 700;
//设置画布
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
//申明圆集
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");

//为申明的圆集设置参数
//定义圆心x坐标
circles.attr("cx",function (d,i) {
return d[0]*magnification;
})
//定义圆心y坐标
.attr("cy",function (d,i) {
return height - d[1]*magnification;
})
//设置圆的半径
.attr("r",function (d) {
return 25;
})
//设置圆的颜色
.attr("fill", "Salmon")