D3.js实现随机散点图（附带横纵坐标轴）

最新推荐文章于 2022-12-02 15:16:17 发布

原创

最新推荐文章于 2022-12-02 15:16:17 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

本文展示了如何使用D3.js库生成一个包含随机散点的图表，包括设置图表尺寸、生成坐标点、定义比例尺以及绘制横纵坐标轴。通过这段代码，可以了解D3.js在数据可视化的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
		.axis path, .axis line {
			fill: none;
			stroke: black;
			shape-rendering: crispEdges;
		}

		.axis text {
			font-family: sans-serif;
			font-size: 11px;
		}
    </style>
</head>

<body>
	
<script src="d3/d3.js"></script>
<script>
	var w = 600; // svg宽度
	var h = 600; // svg高度
	var dataset = []; // 坐标点数据集合
	var xRange = Math.random() * 1000; // x坐标的范围
	var yRange = Math.random() * 1000; // y坐标的范围
	var num = 50; // 点的个数
	var padding = 50; // 描点区域距离svg边界的间距

	for (var i = 0; i < num; i++) {
		// 随机生成50个点坐标
		var tmp1 = Math.floor(Math.random() * xRange);
		var tmp2 = Math.floor(Math.random() * yRange);
		dataset.push([tmp1, tmp2]);
	}

	
	// x坐标的线性比例尺
	var xScale = d3.scale.linear()
						.domain([0, d3.max(dataset, function(d) {
							return d[0];
						})])
						.range([padding, w - padding]);

	// y坐标的线性比例尺
	v