title: 【D3.js】2.1-使用 SVG Circles 创建散点图
date: 2022-12-02 15:11
tags: [JavaScript,CSS,HTML,D3.js,SVG]
前面的章节主要是介绍如何通过D3制作出条形图，接下来将学习如何通过D3制作散点图。
一、学习目标
- 如何动态添加元素？
.data(dataset).enter().append(“circle”)
二、题目
使用 data()、enter()、append() 方法将 dataset 和新添加到 SVG 画布上的 circle 元素绑定起来。
三、通关代码
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
// 在这行下面添加代码
.data(dataset)
.enter()
.append("circle")
// 在这行上面添加代码
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
