js和d3制作简单的直方图

最新推荐文章于 2023-02-18 12:32:28 发布

Lawlirt

最新推荐文章于 2023-02-18 12:32:28 发布

阅读量722

点赞数

分类专栏： web前端设计框架文章标签： JavaScript D3

本文链接：https://blog.csdn.net/Lawliet_Wang/article/details/88071287

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>直方图</title>
	</head>
	<body>
		<!--创建并设置矩形所在的区域大小为1200x800，
		如果宽度不够大，在循环画矩形时会不够位置放置 -->
		<svg id="myreact" width="1200" height="800"></svg>	
		
		<script>
			//var x=110,y=800;
			var mysvg = document.getElementById("myreact");
			//svg为从body里获取的矩形所起的名字
			var svgreact = new Array(10);
			//命名一个大小为10个元素的数组
					
			for(var i=0; i<10; i++){
				//画10个矩阵
				svgreact[i] = document.createElement("rect");
				//为数组元素创建节点rect
				mysvg.appendChild(svgreact[i]);
				//获取的矩阵svg的子节点为数组元素的节点
				var h = Math.random()*400;
				//设置一个随机数，范围为400以内
				svgreact[i].outerHTML="<rect x ="+(i*110)+" y="+(800-h)+" width=100 height="+h&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lawlirt

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js和d3制作简单的直方图

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;直方图&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!--创建并设置矩形所在的区域大小为1200x800，
复制链接

扫一扫