title: 【D3.js】1.20-给 D3 元素添加工具提示
date: 2022-12-02 15:04
tags: [JavaScript,CSS,HTML,D3.js,SVG]
继续增强交互性：给元素添加悬停提示。
一、学习目标
- 如何给元素添加悬停提示？
通过title元素：增加title元素，通过.text()设置title的值
二、题目
在每个 rect 节点下附加 title 元素。 然后用回调函数调用 text() 方法使它的文本显示数据值。
三、通关代码
<style>
.bar:hover {
fill: brown;
}
</style>
<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) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => d * 3)
.attr("fill", "navy")
.attr("class", "bar")
// 在这行下面添加代码
.append("title")
.text((d,i)=>d)
// 在这行上面添加代码
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (d * 3 + 3))
</script>
</body>
扫一扫
2188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
