作业(1)

最新推荐文章于 2020-11-21 12:42:16 发布

原创最新推荐文章于 2020-11-21 12:42:16 发布 · 754 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#D3

代码专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用D3.js库在网页中绘制SVG图形元素，并通过具体的例子展示了如何设置SVG画布尺寸、样式及如何在页面上放置具体元素。文章通过两个不同位置的矩形来演示这一过程。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>坐标轴</title>
</head>
<style>
	.axis path,
	.axis line{
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}
	.axis text {
		font-family: sans-serif;
		font-size: 11px;
	}
	.MyRect {
		fill: white;
		//stroke:blue;
	}
	.MyText {
		fill: black;
		text-anchor: middle;
	}
</style>
<body>
</body>
<script type="text/javascript" src="../plug/d3/d3.min.js"></script>
<script type="text/javascript" src="bookroom.js"></script>
<script>
	window.onload = function() {
		var width = 400;
		var height = 400;

		var svg = d3.select("body")
			.append("svg")
			.attr("width", width)
			.attr("height", height)
			.attr("style","border:1px solid #c3c3c3");
		draw(svg,[{
			name:"no1",
			localtionX:10,
			localtionY:20,
			height:50,
			width:50,
			state:1
		},{
			name:"no2",
			localtionX:100,
			localtionY:50,
			height:50,
			width:50,
			state:0
		}]);
		
	}
</script>
</html>