--- 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: 第一个rectheight应为36。 testString: 'assert($("rect").eq(0).attr("height") == "36", "The first rect should have a height of 36.");' - text: 第二个rectheight应为93。 testString: 'assert($("rect").eq(1).attr("height") == "93", "The second rect should have a height of 93.");' - text: 第三个rectheight应为66。 testString: 'assert($("rect").eq(2).attr("height") == "66", "The third rect should have a height of 66.");' - text: 第四个rectheight应为51。 testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth rect should have a height of 51.");' - text: 第五个rectheight应为75。 testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth rect should have a height of 75.");' - text: 第六个rectheight应为54。 testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth rect should have a height of 54.");' - text: 第七个rectheight应为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: 第九个rectheight应为27。 testString: 'assert($("rect").eq(8).attr("height") == "27", "The ninth rect should have a height of 27.");' ```
## Challenge Seed
```html ```
## Solution
```js // solution required ```