开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的13天，点击查看活动详情

给元素添加内联样式

介绍

D3允许你使用 style() 方法在动态元素上添加内联 CSS 样式。

style() 方法不仅仅可以设置 color——它也适用于其他 CSS 属性。

style() 方法以用逗号分隔的键值对作为参数。 这里是一个将选中文本的颜色设为蓝色的例子：

selection.style("color","blue");

实操

将 style() 方法添加到编辑器中的代码中，使所有显示的文本都具有 verdana 的 font-family 。

1. h2 元素的 font-family 应为 verdana。
2. 你应该使用 style() 方法。

const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

d3.select("body").selectAll("h2")
    .data(dataset)
    .enter()
    .append("h2")
    .text((d) => (d + " USD"))

    .style("font-family","verdana")

根据数据更改样式

介绍

D3 是关于可视化和展示数据的。 如果你想基于数据来改变元素的样式， 你可以在 style() 方法中使用回调函数来修改不同元素的样式。

例如，你想将值小于 20 的数据点设置为蓝色，其余设置为红色。 你可以在 style() 方法中使用包含条件逻辑的回调函数。 回调函数以 d 作为参数来表示一个数据点：

selection.style("color", (d) => {

});

style() 方法不仅仅可以设置 color——它也适用于其他 CSS 属性。

实操

在编辑器中添加 style() 方法，根据条件设置 h2 元素的 color 属性。 写一个回调函数，如果数据值小于 20，则返回红色（red），否则返回绿色（green）。

注意： 你可以使用 if-else 逻辑或者三元操作符。

1. 第一个 h2 的 color 应该为 red。
2. 第二个 h2 的 color 应该为 green。
3. 第三个 h2 的 color 应该为 green。
4. 第四个 h2 的 color 应该为 red。
5. 第五个 h2 的 color 应该为 green。
6. 第六个 h2 的 color 应该为 red。
7. 第七个 h2 的 color 应该为 green。
8. 第八个 h2 的 color 应该为 red。
9. 第九个 h2 的 color 应该为 red。

<script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("h2")
      .data(dataset)
      .enter()
      .append("h2")
      .text((d) => (d + " USD"))
      
      .style("color",(d)=>{
        return d < 20 ? "red":"green"
      })
  </script>