用 D3 添加 Class&动态更新元素的高度

189 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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 类。

  1. div 元素应该一个 bar class。
  2. 应该使用 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 类。 将这些内容结合起来,你就能创建出一个简单的条形图, 只需两步:

  1. 为每一个数组中的数据点都创建一个 div
  2. 为每个 div 动态分配高度值,在 style() 方法中使用回调函数将高度值设置为数据大小

回想使用回调函数设置样式的格式:

selection.style("cssProperty", (d) => d)

实操

style() 方法添加到编辑器中的代码中,以设置每个元素的 height 属性。 使用回调函数返回数据点的值,加上字符串 px

  1. 第一个 divheight 值应为 12 像素。
  2. 第二个 divheight 值应为 31 像素。
  3. 第三个 divheight 值应为 22 像素。
  4. 第四个 divheight 值应为 17 像素。
  5. 第五个 divheight 值应为 25 像素。
  6. 第六个 divheight 值应为 18 像素。
  7. 第七个 divheight 值应为 29 像素。
  8. 第八个 divheight 值应为 14 像素。
  9. 第九个 divheight 值应为 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>