title: 【D3.js】1.11-用 SVG 显示形状
date: 2022-10-07 21:29
tags: [JavaScript,CSS,HTML,D3.js,SVG]
svg元素相当于一个画布，我们可以在svg元素中放置其他图形，如：rect。
一、学习目标
- 如何向svg元素中放置rect元素
appent(“rect”)
- 通过哪两个属性来设置rect元素的位置
attr(“x”,10)
attr(“y”,20)
- 通过哪两个属性来设置rect元素的宽高
attr(“width”,10)
attr(“height”,20)
二、题目
用
append()给svg添加一个width为25、height为100的rect形状。 同时，将rect的x和y都设置为0。
三、通关代码
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// 在这行下面添加代码
.append("rect")
.attr("width",25)
.attr("height",100)
.attr("x",0)
.attr("y",0)
// 在这行上面添加代码
</script>
</body>
四、解析
.append("rect") //添加rect图形
.attr("width",25) //设置宽度
.attr("height",100)//设置高度
.attr("x",0) //设置x坐标
.attr("y",0) //设置y坐标
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
