梦入琼楼寒有月，行过石树冻无烟

D3 散点图

2022-04-21


散点图（scatterplot），主要在回归分析（regression analysis）中主要用于确定两种或两种以上的变量间互相依赖的定量关系的一种统计分析方法。散点图也可以用于表述趋势的增加的聚合数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/* 定义高度与宽度，其中包括 x和y轴的宽度 */
var padding = {
	width: 700,
	height: 700,
	xAxisWidth: 500,
	yAxisWidth: 500,
	right: 30,
	bottom: 30,
	left: 130,
}

/* 定义数据 x,y */
var center = [[0.8,1],[1,0.8],[0.4,0.3],[0.6,0.4],[0.2,0.6],[0.8,0.2],[0.2,0.1]]

/* 定义颜色序数比例尺 */
var color = d3.scale.category10()

/*
	1.选择body元素，并添加一个<svg>元素
	2.并设置<svg>的高\宽为 600.
 */
var svg = d3.select("body")
	.append("svg")
	.attr("width", padding.width)
	.attr("height", padding.height)

/* x/y 轴比例尺 */
var xScale = d3.scale.linear()
	.domain([0, 1 * d3.max(center, function(d) {
		return d[1];
	})])
	.range([0, padding.xAxisWidth])

var yScale = d3.scale.linear()
	.domain([0, 1 * d3.max(center, function(d) {
		return d[1];
	})])
	.range([0, padding.yAxisWidth])

/* 定义圆 */
var cirlce = svg.selectAll("circle")
	.data(center)
	.enter()
	.append("circle")
	.attr("fill", function(d,i) {
		return color(i)
	})
	.attr("cx", function(d) {
		return padding.left + xScale(d[0])
	})
	.attr("cy", function(d) {
		return padding.height - padding.bottom - yScale(d[1])
	})
	.attr("r", 5)

/* x/y 坐标轴选择比例尺 */
var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5)

	yScale.range([padding.yAxisWidth, 0])	/* 反向输出 */

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5)

/* 在 svg 元素中添加一个包含坐标轴的数据并计算出位置 */
svg.append("g")
	.attr("class","axis")
	.attr("transform", "translate(" + padding.left + "," + (padding.height - padding.bottom) + ")")
	.call(xAxis)
svg.append("g")
	.attr("class","axis")
	.attr("transform", "translate(" + padding.left + "," + (padding.height - padding.bottom - padding.yAxisWidth) + ")")
	.call(yAxis)

CSS

1
2
3
4
5
6
7
8
9
10
11
.axis path,   /* 坐标轴路径设置 */
.axis line {    /* 设置 坐标轴的线条 */
  fill: none;   /* 设置坐标轴宽度 */
  stroke: #929292;  /* 坐标轴颜色 */
  shape-rendering: crispEdges;  /* 将形状渲染为清晰的边缘 */
}

.axis text {
  font-size: 14px;
  stroke: #929292;
}
⬅️ Go back