开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的14天,点击查看活动详情
用 D3 添加 Class
介绍
attr()
给元素添加任何 HTML 属性
即使对小型 app 来说,在 HTML 元素中大量使用内联样式也十分难以管理。 给元素添加类,并使用 CSS 规则给类添加样式会更加方便。 D3 中的 attr()
方法可以给元素添加任何 HTML 属性,包括 class 名称。
attr()
方法和 style()
的使用方法一样。 它使用逗号分隔值,并且可以使用回调函数。 下面是给选中元素添加 container
class 的例子:
selection.attr("class", "container");
请注意,当你需要添加 class 时,class
参数保持不变,只有 container
参数会发生变化。
实操
将 attr()
方法添加到编辑器中的代码中,并在 div
元素上添加一个 bar
类。
div
元素应该一个bar
class。- 应该使用
attr()
方法。
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class","bar")
</script>
</body>
动态更新元素的高度
介绍
之前的挑战包括如何从数组中显示数据和如何添加 CSS 类。 将这些内容结合起来,你就能创建出一个简单的条形图, 只需两步:
- 为每一个数组中的数据点都创建一个
div
- 为每个
div
动态分配高度值,在style()
方法中使用回调函数将高度值设置为数据大小
回想使用回调函数设置样式的格式:
selection.style("cssProperty", (d) => d)
实操
将 style()
方法添加到编辑器中的代码中,以设置每个元素的 height
属性。 使用回调函数返回数据点的值,加上字符串 px
。
- 第一个
div
的height
值应为12
像素。 - 第二个
div
的height
值应为31
像素。 - 第三个
div
的height
值应为22
像素。 - 第四个
div
的height
值应为17
像素。 - 第五个
div
的height
值应为25
像素。 - 第六个
div
的height
值应为18
像素。 - 第七个
div
的height
值应为29
像素。 - 第八个
div
的height
值应为14
像素。 - 第九个
div
的height
值应为9
像素。
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height",d=>d+"px")
</script>
</body>