title: 【D3.js】1.15-反转 SVG 元素
date: 2022-12-02 14:07
tags: [JavaScript,CSS,HTML,D3.js,SVG]
文章目录
- 一、学习目标
- 二、题目
- 三、通关代码
- 参考
- 更新
svg坐标的y轴是在顶部的，即画出来的rect也是底朝上，如何让rect的底处于底部呢？
一、学习目标
- 如何通过改变y轴的计算方式来反转rect的底部，使其位于svg的下方？
y = h - d*3;
二、题目
改变
y属性的回调函数，让条形图向上放置。height的值是 3 倍d的值。
三、通关代码
<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);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => {
// 在这行下面添加代码
return h-d*3
// 在这行上面添加代码
})
.attr("width", 25)
.attr("height", (d, i) => 3 * d);
</script>
</body>
参考
- 用 D3 实现数据可视化: 反转 SVG 元素 | freeCodeCamp.org
更新
前往【D3.js】1.15-反转 SVG 元素 | 张鹏帅的官方网站查看更新。
