---
id: 587d7fab367417b2b2512bd8
title: Add Attributes to the Circle Elements
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: 将属性添加到圆形元素
---
## Description
最后一项挑战为dataset
每个点创建了circle
元素,并将它们附加到SVG画布。但D3需要更多关于每个circle
的位置和大小的信息才能正确显示它们。 SVG中的circle
有三个主要属性。 cx
和cy
属性是坐标。它们告诉D3在SVG画布上定位形状中心的位置。半径( r
属性)给出circle
的大小。就像rect
y
坐标一样, circle
的cy
属性是从SVG画布的顶部测量的,而不是从底部测量的。所有这三个属性都可以使用回调函数动态设置其值。请记住,后链接的所有方法data(dataset)
每个项目在运行一次dataset
。回调函数中的d
参数指的是dataset
的当前项,它是每个点的数组。您可以使用括号表示法(如d[0]
)来访问该数组中的值。
## Instructions
将cx
, cy
和r
属性添加到circle
元素。在cx
值应为阵列中的每个项目中的第一个数字dataset
。 cy
值应基于数组中的第二个数字,但请确保图表正面向上显示而不是反转。所有圈子的r
值应为5。
## Tests
```yml
tests:
- text: 您的代码应该有10个circle
元素。
testString: 'assert($("circle").length == 10, "Your code should have 10 circle
elements.");'
- text: 第一个circle
元素的cx
值应为34, cy
值为422, r
值为5。
testString: 'assert($("circle").eq(0).attr("cx") == "34" && $("circle").eq(0).attr("cy") == "422" && $("circle").eq(0).attr("r") == "5", "The first circle
element should have a cx
value of 34, a cy
value of 422, and an r
value of 5.");'
- text: 第二个circle
元素的cx
值应为109, cy
值为220, r
值为5。
testString: 'assert($("circle").eq(1).attr("cx") == "109" && $("circle").eq(1).attr("cy") == "220" && $("circle").eq(1).attr("r") == "5", "The second circle
element should have a cx
value of 109, a cy
value of 220, and an r
value of 5.");'
- text: 第三个circle
元素的cx
值应为310, cy
值为380, r
值为5。
testString: 'assert($("circle").eq(2).attr("cx") == "310" && $("circle").eq(2).attr("cy") == "380" && $("circle").eq(2).attr("r") == "5", "The third circle
element should have a cx
value of 310, a cy
value of 380, and an r
value of 5.");'
- text: 第四个circle
元素的cx
值应为79, cy
值为89, r
值为5。
testString: 'assert($("circle").eq(3).attr("cx") == "79" && $("circle").eq(3).attr("cy") == "89" && $("circle").eq(3).attr("r") == "5", "The fourth circle
element should have a cx
value of 79, a cy
value of 89, and an r
value of 5.");'
- text: 第五个circle
元素的cx
值应为420, cy
值为280, r
值为5。
testString: 'assert($("circle").eq(4).attr("cx") == "420" && $("circle").eq(4).attr("cy") == "280" && $("circle").eq(4).attr("r") == "5", "The fifth circle
element should have a cx
value of 420, a cy
value of 280, and an r
value of 5.");'
- text: 第六个circle
元素的cx
值应为233, cy
值为355, r
值为5。
testString: 'assert($("circle").eq(5).attr("cx") == "233" && $("circle").eq(5).attr("cy") == "355" && $("circle").eq(5).attr("r") == "5", "The sixth circle
element should have a cx
value of 233, a cy
value of 355, and an r
value of 5.");'
- text: 第七个circle
元素的cx
值应为333, cy
值为404, r
值为5。
testString: 'assert($("circle").eq(6).attr("cx") == "333" && $("circle").eq(6).attr("cy") == "404" && $("circle").eq(6).attr("r") == "5", "The seventh circle
element should have a cx
value of 333, a cy
value of 404, and an r
value of 5.");'
- text: 第八个circle
元素的cx
值应为222, cy
值为167, r
值为5。
testString: 'assert($("circle").eq(7).attr("cx") == "222" && $("circle").eq(7).attr("cy") == "167" && $("circle").eq(7).attr("r") == "5", "The eighth circle
element should have a cx
value of 222, a cy
value of 167, and an r
value of 5.");'
- text: 第九个circle
元素的cx
值应为78, cy
值为180, r
值为5。
testString: 'assert($("circle").eq(8).attr("cx") == "78" && $("circle").eq(8).attr("cy") == "180" && $("circle").eq(8).attr("r") == "5", "The ninth circle
element should have a cx
value of 78, a cy
value of 180, and an r
value of 5.");'
- text: 第十个circle
元素的cx
值应为21, cy
值为377, r
值为5。
testString: 'assert($("circle").eq(9).attr("cx") == "21" && $("circle").eq(9).attr("cy") == "377" && $("circle").eq(9).attr("r") == "5", "The tenth circle
element should have a cx
value of 21, a cy
value of 377, and an r
value of 5.");'
```
## Challenge Seed
## Solution
```js
// solution required
```