---
id: 587d7fa9367417b2b2512bcf
title: Dynamically Change the Height of Each Bar
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: 动态改变每个栏的高度
---
## Description
每个条的高度可以设置为数组中数据点的值,类似于动态设置x
值的方式。 selection.attr(“property”,(d,i)=> {
/ *
* d是数据点值
* i是数组中数据点的索引
* /
})
## Instructions
更改height
属性的回调函数以返回数据值乘以3. 注意
请记住,将所有数据点乘以相同的常量可以缩放数据(如放大)。在此示例中,有助于查看条形值之间的差异。
## Tests
```yml
tests:
- text: 第一个rect
的height
应为36。
testString: 'assert($("rect").eq(0).attr("height") == "36", "The first rect
should have a height
of 36.");'
- text: 第二个rect
的height
应为93。
testString: 'assert($("rect").eq(1).attr("height") == "93", "The second rect
should have a height
of 93.");'
- text: 第三个rect
的height
应为66。
testString: 'assert($("rect").eq(2).attr("height") == "66", "The third rect
should have a height
of 66.");'
- text: 第四个rect
的height
应为51。
testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth rect
should have a height
of 51.");'
- text: 第五个rect
的height
应为75。
testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth rect
should have a height
of 75.");'
- text: 第六个rect
的height
应为54。
testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth rect
should have a height
of 54.");'
- text: 第七个rect
的height
应为87。
testString: 'assert($("rect").eq(6).attr("height") == "87", "The seventh rect
should have a height
of 87.");'
- text: 第八个rect
应该有42的height
。
testString: 'assert($("rect").eq(7).attr("height") == "42", "The eighth rect
should have a height
of 42.");'
- text: 第九个rect
的height
应为27。
testString: 'assert($("rect").eq(8).attr("height") == "27", "The ninth rect
should have a height
of 27.");'
```
## Challenge Seed
## Solution
```js
// solution required
```