---
id: 587d7faa367417b2b2512bd4
title: Add a Hover Effect to a D3 Element
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: 将悬停效果添加到D3元素
---
## Description
当用户用鼠标悬停在其上时，可以添加突出显示条形的效果。到目前为止，矩形的样式使用内置的D3和SVG方法，但您也可以使用CSS。使用attr()方法在SVG元素上设置CSS类。然后，新类的:hover伪类保存任何悬停效果的样式规则。
## Instructions
使用attr()方法向所有rect元素添加一个bar类。将鼠标悬停在其上时，会将条形的fill颜色更改为棕色。
## Tests
```yml
tests:
- text: 你的rect元素应该有一类bar 。
testString: 'assert($("rect").attr("class") == "bar", "Your rect elements should have a class of bar.");'
```
## Challenge Seed
## Solution
```js
// solution required
```