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

更改条形图的显示方式

介绍

我们创建了一个条形图，可以通过下面的格式调整来美化它：

通过在 CSS 中为 bar class 添加 margin 属性，给每一个条形图之间添加空格，把它们分开。
通过给每个值乘以一个数来缩放高度，增加高度，以更好地显示值的差异。

实操

首先，在 style 标签中给 bar class 增加值为 2px 的 margin。然后，更改 style() 方法中的回调函数，使其返回原始数据值的 10 倍（加上 px）。

注意： 每一个数值点乘以相同的常量值，仅仅改变比例。这就像放大，它不会改变底层数据的含义。

第一个 div 应有一个 120 像素的 height 和一个 2 像素的 margin。
第二个 div 应有一个 310 像素的 height 和一个 2 像素的 margin。
第三个 div 应有一个 220 像素的 height 和一个 2 像素的 margin。
第四个 div 应有一个 170 像素的 height 和一个 2 像素的 margin。
第五个 div 应有一个 250 像素的 height 和一个 2 像素的 margin。
第六个 div 应有一个 180 像素的 height 和一个 2 像素的 margin。
第七个 div 应有一个 290 像素的 height 和一个 2 像素的 margin。
第八个 div 应有一个 140 像素的 height 和一个 2 像素的 margin。
第九个 div 应有一个 90 像素的 height 和一个 2 像素的 margin。

<style>
  .bar {
    width: 25px;
    height: 100px;
    
    margin: 2px;

    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*10 + "px"))
  </script>
</body>

为条形图加上焦点效果

介绍

在上一步的基础上我们已经得到了一个条形图。让我们来进一步修饰它。我们已经知道 D3 中的 attr() 方法可以给元素添加任何 HTML 属性，包括 class 名称。 D3 允许你使用 style() 方法在动态元素上添加内联 CSS 样式。

实操

首先，在 style 标签中增加 bar:hover class 。bar:hover class将当前鼠标焦点的条形图的背景颜色修改为 red。

你应该添加一个 bar:hover的class。
你应该在 bar:hover class内部将背景颜色修改为red。

<style>
  .bar {
  width: 25px;
  height: 100px;
  margin: 2px;
  display: inline-block;
  background-color: blue;
}

.bar:hover {
  background-color: red;
}
</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*10 + "px"))
  </script>
</body>

更改条形图的显示方式&为条形图加上焦点效果

更改条形图的显示方式

介绍

实操

为条形图加上焦点效果

介绍

实操