D3.js 绘制散点图(scatterplot)

散点图:主要是度量两变量关系强弱的最直观的图形,每个点对应两个值x,y。如下图:

d3-scatterplot-full-8b6a4ab421c758f97e68c9f15e4d7d6a

数据

D3中组织数据集的方式有多种,对于散点图我们用简单的二位数组即可。数据如下:

有10行,每一行一个点,例如(5,20),5为x值,20为y值。

散点图

创建svg:

为每个点创建圆:

圆的圆点和半径:

添加标签:

文本的位置:

字体:

完整代码如下:

d3-scatterplot-full-8b6a4ab421c758f97e68c9f15e4d7d6a

发表评论

电子邮件地址不会被公开。 必填项已用*标注