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

最新推荐文章于 2023-03-11 19:02:40 发布

VIP文章 Orange_J

最新推荐文章于 2023-03-11 19:02:40 发布

阅读量2.8k

点赞数

分类专栏： JavaScript HTML CSS

本文链接：https://blog.csdn.net/juhaotian/article/details/50243235

版权

<!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) {
							ret

最低0.47元/天解锁文章

优惠劵

Orange_J

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
D3.js实现随机散点图（附带横纵坐标轴）

.axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } var w = 600; // svg宽度 va
复制链接

扫一扫