chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: 给 D3 元素添加悬停效果
|
||||
title: Add a Hover Effect to a D3 Element
|
||||
challengeType: 6
|
||||
forumTopicId: 301469
|
||||
dashedName: add-a-hover-effect-to-a-d3-element
|
||||
@ -8,17 +8,17 @@ dashedName: add-a-hover-effect-to-a-d3-element
|
||||
|
||||
# --description--
|
||||
|
||||
我们可以为用户的鼠标悬停行为添加高亮显示的效果。到目前为止，矩形的样式应用了内置的 D3 和 SVG 方法，但是你也可以使用 CSS 来实现。
|
||||
It's possible to add effects that highlight a bar when the user hovers over it with the mouse. So far, the styling for the rectangles is applied with the built-in D3 and SVG methods, but you can use CSS as well.
|
||||
|
||||
你可以使用 `attr()` 方法在 SVG 元素上设置 CSS 类。然后用 `:hover` 伪类为你新添加的 CSS 类设置鼠标悬停的效果。
|
||||
You set the CSS class on the SVG elements with the `attr()` method. Then the `:hover` pseudo-class for your new class holds the style rules for any hover effects.
|
||||
|
||||
# --instructions--
|
||||
|
||||
用 `attr()` 方法给所有的 `rect` 元素都添加 `bar` 类。当鼠标悬停在元素上时，它的 `fill` 将变为棕色。
|
||||
Use the `attr()` method to add a class of `bar` to all the `rect` elements. This changes the `fill` color of the bar to brown when you mouse over it.
|
||||
|
||||
# --hints--
|
||||
|
||||
`rect` 元素应该有 `bar` 类。
|
||||
Your `rect` elements should have a class of `bar`.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('class') == 'bar');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: 给 D3 元素添加工具提示
|
||||
title: Add a Tooltip to a D3 Element
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
@ -8,71 +8,71 @@ dashedName: add-a-tooltip-to-a-d3-element
|
||||
|
||||
# --description--
|
||||
|
||||
当用户在一个对象上悬停时，提示框可以显示关于这个对象更多的信息。在可视化中有多种方法添加提示框，这个挑战将使用 SVG 的 `title` 元素。
|
||||
A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG `title` element.
|
||||
|
||||
请使用 `tile` 和 `text()` 方法一起给每组动态添加数据。
|
||||
`title` pairs with the `text()` method to dynamically add data to the bars.
|
||||
|
||||
# --instructions--
|
||||
|
||||
在每个 `rect` 节点下面添加一个 `title` 元素，然后用回调函数调用 `text()` 方法使它的文本显示数据值。
|
||||
Append a `title` element under each `rect` node. Then call the `text()` method with a callback function so the text displays the data value.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有 9 个 `title` 元素。
|
||||
Your code should have 9 `title` elements.
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
第一个 `title` 元素的提示框文本应为 12。
|
||||
The first `title` element should have tooltip text of 12.
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
第二个 `title` 元素的提示框文本应为 31。
|
||||
The second `title` element should have tooltip text of 31.
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
第三个 `title` 元素的提示框文本应为 22。
|
||||
The third `title` element should have tooltip text of 22.
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
第四个 `title` 元素的提示框文本应为 17。
|
||||
The fourth `title` element should have tooltip text of 17.
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
第五个 `title` 元素的提示框文本应为 25。
|
||||
The fifth `title` element should have tooltip text of 25.
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
第六个 `title` 元素的提示框文本应为 18。
|
||||
The sixth `title` element should have tooltip text of 18.
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
第七个 `title` 元素的提示框文本应为 29。
|
||||
The seventh `title` element should have tooltip text of 29.
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
第八个 `title` 元素的提示框文本应为 14。
|
||||
The eighth `title` element should have tooltip text of 14.
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
第九个 `title` 元素的提示框文本应为 9。
|
||||
The ninth `title` element should have tooltip text of 9.
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
@ -160,7 +160,7 @@ assert($('title').eq(8).text() == '9');
|
||||
.attr("class", "bar")
|
||||
.append("title")
|
||||
.text((d) => d)
|
||||
|
||||
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: 给 Circle 元素添加属性
|
||||
title: Add Attributes to the Circle Elements
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
@ -8,27 +8,27 @@ dashedName: add-attributes-to-the-circle-elements
|
||||
|
||||
# --description--
|
||||
|
||||
上个挑战为 `dataset` 中的每个点都创建了 `circle` 元素，并将它们添加到 SVG 画布上。但是 D3 需要更多关于位置和 `circle` 大小的信息来正确的显示它们。
|
||||
The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly.
|
||||
|
||||
在 SVG 中 `circle` 有三个主要的属性。`cx` 和 `cy` 属性是坐标，它们告诉 D3 将图形的*中心*放在 SVG 画布的何处。半径（ `r` 属性）给出 `circle` 的大小。
|
||||
A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`.
|
||||
|
||||
就像 `rect` 的 `y` 坐标，`circle` 的 `cy` 属性是从 SVG 画布的顶端开始测量的，而不是从底端。
|
||||
Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom.
|
||||
|
||||
所有的属性都可以用回调函数来动态设值。记住，所有串联在 `data(dataset)` 后面的方法为 `dataset` 中的每个对象都运行一次。回调函数中的 `d` 参数指在 `dataset` 中的当前对象，对每个点来说都是一个数组。就像 `d[0]`，你可以使用方括号的方式来访问数组中的值。
|
||||
All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
为 `circle` 元素添加 `cx`、`cy`、`r` 属性。`cx` 的值应该是 `dataset` 中每个对象的数组的第一个数，`cy` 的值应该根据数据中的第二个数，但是要确保正向显示图表而不是倒转。所有圆圈的 `r` 的值应该为 5。
|
||||
Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be 5 for all circles.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有 10 个 `circle` 元素。
|
||||
Your code should have 10 `circle` elements.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
第一个 `circle` 元素的 `cx` 值应该为 34，`cy` 值应该为 422，`r` 值应该为 5。
|
||||
The first `circle` element should have a `cx` value of 34, a `cy` value of 422, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第二个 `circle` 元素的 `cx` 值应该为 109，`cy` 值应该为 220，`r` 值应该为 5。
|
||||
The second `circle` element should have a `cx` value of 109, a `cy` value of 220, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第三个 `circle` 元素的 `cx` 值应该为 310，`cy` 值应该为 380，`r` 值应该为 5。
|
||||
The third `circle` element should have a `cx` value of 310, a `cy` value of 380, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第四个 `circle` 元素的 `cx` 值应该为 79，`cy` 值应该为 89，`r` 值应该为 5。
|
||||
The fourth `circle` element should have a `cx` value of 79, a `cy` value of 89, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第五个 `circle` 元素的 `cx` 值应该为 420，`cy` 值应该为 280，`r` 值应该为 5。
|
||||
The fifth `circle` element should have a `cx` value of 420, a `cy` value of 280, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -78,7 +78,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第六个 `circle` 元素的 `cx` 值应该为 233，`cy` 值应该为 355，`r` 值应该为 5。
|
||||
The sixth `circle` element should have a `cx` value of 233, a `cy` value of 355, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -88,7 +88,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第七个 `circle` 元素的 `cx` 值应该为 333，`cy` 值应该为 404，`r` 值应该为 5。
|
||||
The seventh `circle` element should have a `cx` value of 333, a `cy` value of 404, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -98,7 +98,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第八个 `circle` 元素的 `cx` 值应该为 222，`cy` 值应该为 167，`r` 值应该为 5。
|
||||
The eighth `circle` element should have a `cx` value of 222, a `cy` value of 167, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -108,7 +108,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第九个 `circle` 元素的 `cx` 值应该为 78，`cy` 值应该为 180，`r` 值应该为 5。
|
||||
The ninth `circle` element should have a `cx` value of 78, a `cy` value of 180, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -118,7 +118,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第十个 `circle` 元素的 `cx` 值应该为 21，`cy` 值应该为 377，`r` 值应该为 5。
|
||||
The tenth `circle` element should have a `cx` value of 21, a `cy` value of 377, and an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: 添加坐标轴到视图中
|
||||
title: Add Axes to a Visualization
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
@ -8,21 +8,15 @@ dashedName: add-axes-to-a-visualization
|
||||
|
||||
# --description--
|
||||
|
||||
另一种改进散点图的方法是添加 x 轴和 y 轴。
|
||||
Another way to improve the scatter plot is to add an x-axis and a y-axis.
|
||||
|
||||
D3 有两种方法来渲染 y 轴和 x 轴，分别是 `axisLeft()` 和 `axisBottom()`。下面是一个基于上个挑战中的 `xScale` 创建 x 轴的例子：
|
||||
D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the `xScale` in the previous challenges:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
下一步是在 SVG 画布上渲染 x 轴。为此，你可以使用一个 SVG 组件， `g` 元素，`g` 是英文中组(group)的缩写。
|
||||
|
||||
不同于 `rect`、`circle`、`text`，在渲染时，轴只是一条直线。因为它是一个简单的图形，所以可以用 `g` 。
|
||||
|
||||
最后一步是使用 `transform` 属性将轴放置在 SVG 画布的正确位置上。否则，轴将会沿着 SVG 画布的边缘渲染，从而不可见。
|
||||
|
||||
SVG 支持多种 `transform`，但是定位轴需要使用 `translate` 属性。当它应用在 `g` 元素上时，它根据给出的总量移动整组。下面是一个例子：
|
||||
The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
@ -32,21 +26,21 @@ svg.append("g")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
上部分代码将 x 轴放置在 SVG 画布的底端。然后 x 轴作为参数被传递给 `call` 方法。 除了 `translate` 的参数变成 (x,0) ，y 轴的定位也是一样的。因为 `translate` 是 `attr` 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。
|
||||
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form (x, 0). Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
|
||||
|
||||
# --instructions--
|
||||
|
||||
现在散点图有 x 轴了。用 `axisLeft` 方法创建 y 轴并赋值给 `yAxis` 变量，然后通过 `g` 元素渲染 y 轴。确保用 `transform` 属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。记得 `call()` y 轴。
|
||||
The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and 0 units down. Remember to `call()` the axis.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用参数为 `yScale` 的 `axisLeft()` 方法。
|
||||
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
y 轴的 `g`元素应该有一个`transform` 属性来将 y 轴平移（60，0）。
|
||||
The y-axis `g` element should have a `transform` attribute to translate the axis by (60, 0).
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你应该调用(call) `yAxis` 。
|
||||
Your code should call the `yAxis`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
@ -187,9 +181,9 @@ assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
|
||||
const yAxis = d3.axisLeft(yScale);
|
||||
|
||||
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (h - padding) + ")")
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: 用 D3 添加 Class
|
||||
title: Add Classes with D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
@ -8,25 +8,27 @@ dashedName: add-classes-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
即使对小型 app 来说在 HTML 元素中大量使用内联样式表也十分难以管理。更方便的是给元素添加遵守 CSS 规则的类。D3 中的 `attr()` 方法可以给元素添加任何 HTML 属性，包括类名称。
|
||||
Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name.
|
||||
|
||||
`attr()` 方法和 `style()` 的使用方法一样。它以逗号分隔的键值对为参数使用回调函数。这里是一个给选中元素添加类名为 "container" 的例子：`selection.attr("class", "container");`
|
||||
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of "container" to a selection:
|
||||
|
||||
注意当 "container" 元素改变或者添加一个 class 时，"class" 参数会保持不变。
|
||||
`selection.attr("class", "container");`
|
||||
|
||||
Note that the "class" parameter will remain the same whenever you need to add a class and only the "container" parameter will change.
|
||||
|
||||
# --instructions--
|
||||
|
||||
在编辑器中添加 `attr()` 方法，给 `div` 元素添加类名 `bar`。
|
||||
Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `div`元素应该有一个`bar` 类。
|
||||
Your `div` elements should have a class of `bar`.
|
||||
|
||||
```js
|
||||
assert($('div').attr('class') == 'bar');
|
||||
```
|
||||
|
||||
你应该使用 `attr()` 方法。
|
||||
Your code should use the `attr()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: 用 D3 给文档添加元素
|
||||
title: Add Document Elements with D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301474
|
||||
dashedName: add-document-elements-with-d3
|
||||
@ -8,21 +8,21 @@ dashedName: add-document-elements-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
D3 有多种方法可以用来在文档中增加元素、修改元素。
|
||||
D3 has several methods that let you add and change elements in your document.
|
||||
|
||||
`select()` 方法用来从文档中选择元素，它以你查询的元素名称作为参数，返回第一个符合条件的 HTML 节点。以下是一个例子：
|
||||
The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:
|
||||
|
||||
`const anchor = d3.select("a");`
|
||||
|
||||
上面这个例子找到页面上的第一个 a 标签（锚标签），将它作为一个 HTML 节点保存在变量 `anchor` 中。你也可以用其他的方法选择页面上的元素。例子中的 "d3" 是对 D3 对象的引用，可以通过它来访问 D3 的方法。
|
||||
The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The "d3" part of the example is a reference to the D3 object, which is how you access D3 methods.
|
||||
|
||||
还可以用 `append()` 和 `text()` 方法。
|
||||
Two other useful methods are `append()` and `text()`.
|
||||
|
||||
`append()` 方法以你想添加到文档中的元素作为参数，给选中的元素添加一个 HTML 节点，返回那个节点的句柄。
|
||||
The `append()` method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.
|
||||
|
||||
`text()` 方法既可以给节点设置新的文本，也可以获取节点的当前文本。 如果要设置文字内容，需要在圆括号中传入一个 string（字符串）类型的参数。
|
||||
The `text()` method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.
|
||||
|
||||
下面是一个选择无序列表、添加列表项和文字的例子：
|
||||
Here's an example that selects an unordered list, appends a list item, and adds text:
|
||||
|
||||
```js
|
||||
d3.select("ul")
|
||||
@ -30,45 +30,45 @@ d3.select("ul")
|
||||
.text("Very important item");
|
||||
```
|
||||
|
||||
在 D3 中可以使用英文句号将多个方法串联在一起执行多个操作。
|
||||
D3 allows you to chain several methods together with periods to perform a number of actions in a row.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `select` 方法选择文本中的 `body` 标签。然后用 `append` 方法为它添加一个 `h1` 标签，同时在 `h1` 中添加文本 "Learning D3"。
|
||||
Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text "Learning D3" into the `h1` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `body` 元素应该包含元素 `h1`。
|
||||
The `body` should have one `h1` element.
|
||||
|
||||
```js
|
||||
assert($('body').children('h1').length == 1);
|
||||
```
|
||||
|
||||
你的 `h1` 元素应该包含文本 'Learning D3'。
|
||||
The `h1` element should have the text "Learning D3" in it.
|
||||
|
||||
```js
|
||||
assert($('h1').text() == 'Learning D3');
|
||||
```
|
||||
|
||||
你应该能访问 `d3` 的对象。
|
||||
Your code should access the `d3` object.
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
你应该使用 `select` 方法。
|
||||
Your code should use the `select` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.select/g));
|
||||
```
|
||||
|
||||
你应该使用 `append` 方法。
|
||||
Your code should use the `append` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
你应该使用 `text` 方法。
|
||||
Your code should use the `text` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.text/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: 给元素添加内联样式
|
||||
title: Add Inline Styling to Elements
|
||||
challengeType: 6
|
||||
forumTopicId: 301475
|
||||
dashedName: add-inline-styling-to-elements
|
||||
@ -8,25 +8,25 @@ dashedName: add-inline-styling-to-elements
|
||||
|
||||
# --description--
|
||||
|
||||
D3 可以使用 `style()` 方法为动态元素添加内联 CSS 样式表。
|
||||
D3 lets you add inline CSS styles on dynamic elements with the `style()` method.
|
||||
|
||||
`style()` 方法以用逗号分隔的键值对作为参数。这里是一个将选中文本的颜色设为蓝色的例子：
|
||||
The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:
|
||||
|
||||
`selection.style("color","blue");`
|
||||
|
||||
# --instructions--
|
||||
|
||||
在编辑器中添加 `style()` 方法，使所有显示的文本的 `font-family` 为 `verdana`。
|
||||
Add the `style()` method to the code in the editor to make all the displayed text have a `font-family` of `verdana`.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `h2` 元素的 `font-family` 应该为 verdana。
|
||||
Your `h2` elements should have a `font-family` of verdana.
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-family') == 'verdana');
|
||||
```
|
||||
|
||||
你应该使用 `style()` 方法。
|
||||
Your code should use the `style()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.style/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: 给 D3 元素添加标签
|
||||
title: Add Labels to D3 Elements
|
||||
challengeType: 6
|
||||
forumTopicId: 301476
|
||||
dashedName: add-labels-to-d3-elements
|
||||
@ -8,70 +8,70 @@ dashedName: add-labels-to-d3-elements
|
||||
|
||||
# --description--
|
||||
|
||||
D3 允许使用 SVG 的 `text` 元素给图形元素贴标签，例如给条形图中的各组都贴上标签。
|
||||
D3 lets you label a graph element, such as a bar, using the SVG `text` element.
|
||||
|
||||
和 `rect` 元素类似，`text` 元素也需要 `x` 和 `y` 属性来指定其放置在 SVG 画布上的位置，它也需要能够获取数据来显示数据值。
|
||||
Like the `rect` element, a `text` element needs to have `x` and `y` attributes, to place it on the SVG canvas. It also needs to access the data to display those values.
|
||||
|
||||
关于如何给组贴标签，D3 给了你很高的控制权。
|
||||
D3 gives you a high level of control over how you label your bars.
|
||||
|
||||
# --instructions--
|
||||
|
||||
编辑器中的代码已经将数据绑定到每个新的 `text` 元素。首先，在 `svg` 中添加 `text` 节点。然后，添加 `x` 和 `y` 坐标属性，除了 `text` 的 `y` 值应该使标签比组的高 `y` 3 个单位，其余值的计算方法应该和 `rect` 中计算方法一样。最后，用 D3 的 `text()` 方法将标签的文本设置为和数据点相等的值。
|
||||
The code in the editor already binds the data to each new `text` element. First, append `text` nodes to the `svg`. Next, add attributes for the `x` and `y` coordinates. They should be calculated the same way as the `rect` ones, except the `y` value for the `text` should make the label sit 3 units higher than the bar. Finally, use the D3 `text()` method to set the label equal to the data point value.
|
||||
|
||||
**提示**
|
||||
关于标签比组高，想一想 `text` 的 `y` 值应该比组的 `y` 值大 3 还是小 3。
|
||||
**Note**
|
||||
For the label to sit higher than the bar, decide if the `y` value for the `text` should be 3 greater or 3 less than the `y` value for the bar.
|
||||
|
||||
# --hints--
|
||||
|
||||
第一个 `text` 元素应该有一个值为 12 的标签并且 `y` 值为 61。
|
||||
The first `text` element should have a label of 12 and a `y` value of 61.
|
||||
|
||||
```js
|
||||
assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
|
||||
```
|
||||
|
||||
第二个 `text` 元素应该有一个值为 31 的标签并且 `y` 值为 4。
|
||||
The second `text` element should have a label of 31 and a `y` value of 4.
|
||||
|
||||
```js
|
||||
assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
|
||||
```
|
||||
|
||||
第三个 `text` 元素应该有一个值为 22 的标签并且 `y` 值为 31。
|
||||
The third `text` element should have a label of 22 and a `y` value of 31.
|
||||
|
||||
```js
|
||||
assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
|
||||
```
|
||||
|
||||
第四个 `text` 元素应该有一个值为 17 的标签并且 `y` 值为 46。
|
||||
The fourth `text` element should have a label of 17 and a `y` value of 46.
|
||||
|
||||
```js
|
||||
assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
|
||||
```
|
||||
|
||||
第五个 `text` 元素应该有一个值为 25 的标签并且 `y` 值为 22。
|
||||
The fifth `text` element should have a label of 25 and a `y` value of 22.
|
||||
|
||||
```js
|
||||
assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
|
||||
```
|
||||
|
||||
第六个 `text` 元素应该有一个值为 18 的标签并且 `y` 值为 43。
|
||||
The sixth `text` element should have a label of 18 and a `y` value of 43.
|
||||
|
||||
```js
|
||||
assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
|
||||
```
|
||||
|
||||
第七个 `text` 元素应该有一个值为 29 的标签并且 `y` 值为 10。
|
||||
The seventh `text` element should have a label of 29 and a `y` value of 10.
|
||||
|
||||
```js
|
||||
assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
|
||||
```
|
||||
|
||||
第八个 `text` 元素应该有一个值为 14 的标签并且 `y` 值为 55。
|
||||
The eighth `text` element should have a label of 14 and a `y` value of 55.
|
||||
|
||||
```js
|
||||
assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
|
||||
```
|
||||
|
||||
第九个 `text` 元素应该有一个值为 9 的标签并且 `y` 值为 70。
|
||||
The ninth `text` element should have a label of 9 and a `y` value of 70.
|
||||
|
||||
```js
|
||||
assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: 向散点图的 Circles 添加标签
|
||||
title: Add Labels to Scatter Plot Circles
|
||||
challengeType: 6
|
||||
forumTopicId: 301477
|
||||
dashedName: add-labels-to-scatter-plot-circles
|
||||
@ -8,25 +8,25 @@ dashedName: add-labels-to-scatter-plot-circles
|
||||
|
||||
# --description--
|
||||
|
||||
你可以添加文本为散点图中的点创建标签。
|
||||
You can add text to create labels for the points in a scatter plot.
|
||||
|
||||
目标是显示以逗号分隔的值，分别为 `dataset` 中每个对象的第一个(`x`)和第二个(`y`)字段
|
||||
The goal is to display the comma-separated values for the first (`x`) and second (`y`) fields of each item in `dataset`.
|
||||
|
||||
`text` 节点需要 `x` 和 `y` 属性来指定放置在 SVG 画布中的位置。在这个挑战中，`y` 值（决定高度）可以用和 `circle` 的 `cy` 属性相同的值，`x` 值可以比 `circle` 的 `cx` 值稍微大一些，这样标签才是可见的并且被放置在散点的右边。
|
||||
The `text` nodes need `x` and `y` attributes to position it on the SVG canvas. In this challenge, the `y` value (which determines height) can use the same value that the `circle` uses for its `cy` attribute. The `x` value can be slightly larger than the `cx` value of the `circle`, so the label is visible. This will push the label to the right of the plotted point.
|
||||
|
||||
# --instructions--
|
||||
|
||||
用 `text` 元素为散点图中的每个点创建标签。标签的文本应该为用一个逗号和一个空格分隔开的两个值，例如，第一个点的标签为 "34, 78"。设置 `x` 属性比 `circle` 的 `cx` 属性大 5 个单位，设置 `y` 属性和 `circle` 的 `cy` 属性相同。
|
||||
Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is "34, 78". Set the `x` attribute so it's 5 units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有 10 个 `text` 元素。
|
||||
Your code should have 10 `text` elements.
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
第一个标签的文本应该为 '34, 78'， `x` 值应该为 39， `y` 应该为 422。
|
||||
The first label should have text of "34, 78", an `x` value of 39, and a `y` value of 422.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第二个标签的文本应该为 '109, 280'， `x` 值应该为 114， `y` 应该为 220。
|
||||
The second label should have text of "109, 280", an `x` value of 114, and a `y` value of 220.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,7 +46,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第三个标签的文本应该为 '310, 120'， `x` 值应该为 315， `y` 应该为 380。
|
||||
The third label should have text of "310, 120", an `x` value of 315, and a `y` value of 380.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第四个标签的文本应该为 '79, 411'， `x` 值应该为 84， `y` 应该为 89。
|
||||
The fourth label should have text of "79, 411", an `x` value of 84, and a `y` value of 89.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第五个标签的文本应该为 '420, 220'， `x` 值应该为 425， `y` 应该为 280。
|
||||
The fifth label should have text of "420, 220", an `x` value of 425, and a `y` value of 280.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -76,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第六个标签的文本应该为 '233, 145'， `x` 值应该为 238， `y` 应该为 355。
|
||||
The sixth label should have text of "233, 145", an `x` value of 238, and a `y` value of 355.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -86,7 +86,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第七个标签的文本应该为 '333, 96'， `x` 值应该为 338， `y` 应该为 404。
|
||||
The seventh label should have text of "333, 96", an `x` value of 338, and a `y` value of 404.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -96,7 +96,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第八个标签的文本应该为 '222, 333'， `x` 值应该为 227， `y` 应该为 167。
|
||||
The eighth label should have text of "222, 333", an `x` value of 227, and a `y` value of 167.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -106,7 +106,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第九个标签的文本应该为 '78, 320'， `x` 值应该为 83， `y` 应该为 180。
|
||||
The ninth label should have text of "78, 320", an `x` value of 83, and a `y` value of 180.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -116,7 +116,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第十个标签的文本应该为 '21, 123'， `x` 值应该为 26， `y` 应该为 377。
|
||||
The tenth label should have text of "21, 123", an `x` value of 26, and a `y` value of 377.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -218,7 +218,7 @@ assert(
|
||||
.attr("x", (d) => d[0] + 5)
|
||||
.attr("y", (d) => h - d[1])
|
||||
.text((d) => (d[0] + ", " + d[1]))
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc7
|
||||
title: 根据数据更改样式
|
||||
title: Change Styles Based on Data
|
||||
challengeType: 6
|
||||
forumTopicId: 301479
|
||||
dashedName: change-styles-based-on-data
|
||||
@ -8,9 +8,9 @@ dashedName: change-styles-based-on-data
|
||||
|
||||
# --description--
|
||||
|
||||
D3 是关于可视化和展示数据的。如果你期望基于数据来改变元素的样式，你可以在 `style()` 方法中使用回调函数为不同元素改变样式。
|
||||
D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the `style()` method to change the styling for different elements.
|
||||
|
||||
例如，你想将值小于 20 的数据点设置为蓝色，其余设置为红色。你可以在 `style()` 方法中使用包含条件逻辑的回调函数。回调函数以 `d` 作为参数来表示一个数据点：
|
||||
For example, you may want to color a data point blue if it has a value less than 20, and red otherwise. You can use a callback function in the `style()` method and include the conditional logic. The callback function uses the `d` parameter to represent the data point:
|
||||
|
||||
```js
|
||||
selection.style("color", (d) => {
|
||||
@ -18,66 +18,66 @@ selection.style("color", (d) => {
|
||||
});
|
||||
```
|
||||
|
||||
`style()` 方法不仅仅可以设置 `color`——它也适用于其他 CSS 属性。
|
||||
The `style()` method is not limited to setting the `color` - it can be used with other CSS properties as well.
|
||||
|
||||
# --instructions--
|
||||
|
||||
在编辑器中添加 `style()` 方法，根据条件设置 `h2` 元素的 `color` 属性。写一个回调函数，如果值小于 20 返回 "red"，否则返回 "green"。
|
||||
Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green".
|
||||
|
||||
**提示**
|
||||
你可以使用 if-else 语句或者三目操作符。
|
||||
**Note**
|
||||
You can use if-else logic, or the ternary operator.
|
||||
|
||||
# --hints--
|
||||
|
||||
第一个 `h2` 的 `color` 应该为 red。
|
||||
The first `h2` should have a `color` of red.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
第二个 `h2` 的 `color` 应该为 green。
|
||||
The second `h2` should have a `color` of green.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
第三个 `h2` 的 `color` 应该为 green。
|
||||
The third `h2` should have a `color` of green.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
第四个 `h2` 的 `color` 应该为 red。
|
||||
The fourth `h2` should have a `color` of red.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
第五个 `h2` 的 `color` 应该为 green。
|
||||
The fifth `h2` should have a `color` of green.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
第六个 `h2` 的 `color` 应该为 red。
|
||||
The sixth `h2` should have a `color` of red.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
第七个 `h2` 的 `color` 应该为 green。
|
||||
The seventh `h2` should have a `color` of green.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
第八个 `h2` 的 `color` 应该为 red。
|
||||
The eighth `h2` should have a `color` of red.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
第九个 `h2` 的 `color` 应该为 red。
|
||||
The ninth `h2` should have a `color` of red.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd1
|
||||
title: 更改 SVG 元素的颜色
|
||||
title: Change the Color of an SVG Element
|
||||
challengeType: 6
|
||||
forumTopicId: 301480
|
||||
dashedName: change-the-color-of-an-svg-element
|
||||
@ -8,17 +8,17 @@ dashedName: change-the-color-of-an-svg-element
|
||||
|
||||
# --description--
|
||||
|
||||
所有组都在正确的位置上了，但是它们都是一样的黑色。SVG 可以改变组的颜色。
|
||||
The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.
|
||||
|
||||
在 SVG 中， `rect` 图形用 `fill` 属性着色，它支持十六进制代码、颜色名称、rgb 值以及更复杂的选项，比如渐变和透明。
|
||||
In SVG, a `rect` shape is colored with the `fill` attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.
|
||||
|
||||
# --instructions--
|
||||
|
||||
添加 `attr()` 方法，将所有组的 "fill" 设置为 "navy"。
|
||||
Add an `attr()` method to set the "fill" of all the bars to the color "navy".
|
||||
|
||||
# --hints--
|
||||
|
||||
所有组的 `fill` 颜色都应该是 navy。
|
||||
The bars should all have a `fill` color of navy.
|
||||
|
||||
```js
|
||||
assert($('rect').css('fill') == 'rgb(0, 0, 128)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: 更改条形图的显示方式
|
||||
title: Change the Presentation of a Bar Chart
|
||||
challengeType: 6
|
||||
forumTopicId: 301481
|
||||
dashedName: change-the-presentation-of-a-bar-chart
|
||||
@ -8,22 +8,22 @@ dashedName: change-the-presentation-of-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
这里有一些格式的改变可以美化上个挑战中创建的条形图：
|
||||
The last challenge created a bar chart, but there are a couple of formatting changes that could improve it:
|
||||
|
||||
1) 通过在 CSS 中为 `bar` 的类添加 margin 属性，为每一组之间添加空格以直观的将它们分开
|
||||
1) Add space between each bar to visually separate them, which is done by adding a margin to the CSS for the `bar` class
|
||||
|
||||
2) 通过给每个值乘以一个数来缩放高度，增加高度以更好地显示值的差异
|
||||
2) Increase the height of the bars to better show the difference in values, which is done by multiplying the value by a number to scale the height
|
||||
|
||||
# --instructions--
|
||||
|
||||
首先，在 `style` 标签中为 `bar` 类添加 2px 的 `margin` 属性。然后，在 `style()` 方法中修改回调函数，使它返回 10 倍原数值的值（在后面加上 "px"）。
|
||||
First, add a `margin` of 2px to the `bar` class in the `style` tag. Next, change the callback function in the `style()` method so it returns a value 10 times the original data value (plus the "px").
|
||||
|
||||
**提示**
|
||||
通过给每一个数值点乘以*相同的*常量值仅仅改变比例。这就像放大，它不会改变底层数据的含义。
|
||||
**Note**
|
||||
Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data.
|
||||
|
||||
# --hints--
|
||||
|
||||
第一个 `div` 的 `height` 应该为 120 个像素，`margin` 应该为 2 个像素。
|
||||
The first `div` should have a `height` of 120 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -32,7 +32,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第二个 `div` 的 `height` 应该为 310 个像素，`margin` 应该为 2 个像素。
|
||||
The second `div` should have a `height` of 310 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -41,7 +41,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第三个 `div` 的 `height` 应该为 220 个像素，`margin` 应该为 2 个像素。
|
||||
The third `div` should have a `height` of 220 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,7 +50,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第四个 `div` 的 `height` 应该为 170 个像素，`margin` 应该为 2 个像素。
|
||||
The fourth `div` should have a `height` of 170 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -59,7 +59,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第五个 `div` 的 `height` 应该为 250 个像素，`margin` 应该为 2 个像素。
|
||||
The fifth `div` should have a `height` of 250 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第六个 `div` 的 `height` 应该为 180 个像素，`margin` 应该为 2 个像素。
|
||||
The sixth `div` should have a `height` of 180 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第七个 `div` 的 `height` 应该为 290 个像素，`margin` 应该为 2 个像素。
|
||||
The seventh `div` should have a `height` of 290 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -86,7 +86,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第八个 `div` 的 `height` 应该为 140 个像素，`margin` 应该为 2 个像素。
|
||||
The eighth `div` should have a `height` of 140 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -95,7 +95,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第九个 `div` 的 `height` 应该为 90 个像素，`margin` 应该为 2 个像素。
|
||||
The ninth `div` should have a `height` of 90 pixels and a `margin` of 2 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -115,7 +115,7 @@ assert(
|
||||
height: 100px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: 为集合中的每个数据点创建一个数据条
|
||||
title: Create a Bar for Each Data Point in the Set
|
||||
challengeType: 6
|
||||
forumTopicId: 301482
|
||||
dashedName: create-a-bar-for-each-data-point-in-the-set
|
||||
@ -8,9 +8,9 @@ dashedName: create-a-bar-for-each-data-point-in-the-set
|
||||
|
||||
# --description--
|
||||
|
||||
上个挑战在 `svg` 中只添加了一个矩形来表示数据条。接下来你将结合到目前为止所学的关于 `data()`、`enter()` 和 SVG 图形的知识，为 `dataset` 中的每一个数据点创建并且添加一个矩形。
|
||||
The last challenge added only one rectangle to the `svg` element to represent a bar. Here, you'll combine what you've learned so far about `data()`, `enter()`, and SVG shapes to create and append a rectangle for each data point in `dataset`.
|
||||
|
||||
之前的挑战展示了如何为 `dataset` 中的每个对象创建并添加一个 `div`：
|
||||
A previous challenge showed the format for how to create and append a `div` for each item in `dataset`:
|
||||
|
||||
```js
|
||||
d3.select("body").selectAll("div")
|
||||
@ -19,33 +19,33 @@ d3.select("body").selectAll("div")
|
||||
.append("div")
|
||||
```
|
||||
|
||||
操作 `rect` 元素和 `div` 有一些不同，`rect` 必须添加在 `svg` 元素内，而不能直接添加在 `body` 内。同时，你需要告诉 D3 将 `rect` 放在 `svg` 区域的哪个位置。条形的放置会在下一个挑战中讲到。
|
||||
There are a few differences working with `rect` elements instead of `divs`. The `rects` must be appended to an `svg` element, not directly to the `body`. Also, you need to tell D3 where to place each `rect` within the `svg` area. The bar placement will be covered in the next challenge.
|
||||
|
||||
# --instructions--
|
||||
|
||||
用 `data()`、`enter()`、`append()` 方法为 `dataset` 中的每一个对象创建并添加一个 `rect` 。每个数据条都将直接显示在上一个数据条的上面，将上一个数据条覆盖，这将会在下一个挑战中得到修改。
|
||||
Use the `data()`, `enter()`, and `append()` methods to create and append a `rect` for each item in `dataset`. The bars should display all on top of each other; this will be fixed in the next challenge.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该包含 9 个 `rect` 元素。
|
||||
Your document should have 9 `rect` elements.
|
||||
|
||||
```js
|
||||
assert($('rect').length == 9);
|
||||
```
|
||||
|
||||
你应该使用 `data()` 方法。
|
||||
Your code should use the `data()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.data/g));
|
||||
```
|
||||
|
||||
你应该使用 `enter()` 方法。
|
||||
Your code should use the `enter()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.enter/g));
|
||||
```
|
||||
|
||||
你应该使用 `append()` 方法。
|
||||
Your code should use the `append()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: 用 D3 创建线性比例
|
||||
title: Create a Linear Scale with D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301483
|
||||
dashedName: create-a-linear-scale-with-d3
|
||||
@ -8,39 +8,39 @@ dashedName: create-a-linear-scale-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
条形图和散点图都直接在 SVG 画布上绘制数据。但是，如果一组的高或者其中一个数据点比 SVG 的高或宽更大，它将跑到 SVG 区域外。
|
||||
The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.
|
||||
|
||||
D3 中，比例尺可帮助布局数据。 `Scales` 是告诉程序如何将一组原始数据点映射到 SVG 画布上像素的函数。
|
||||
In D3, there are scales to help plot data. `Scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
|
||||
|
||||
例如，假设你有一个 100x500 大小的 SVG 画布，你想为许多国家绘制国内生产总值(GDP)的图表。这组数据将在十亿美元或万亿美元的范围内。你给 D3 提供一种缩放方法告诉它如何将大的 GDP 值放置在 100x500 大小的区域。
|
||||
For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.
|
||||
|
||||
你不太可能按原样绘制原始数据，在绘制之前，将整个数据集缩放，这样 `x` 和 `y` 值才适合你画布的宽高。
|
||||
It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height.
|
||||
|
||||
D3 有几种缩放类型。对于线性缩放（通常使用于定量数据），使用 D3 的 `scaleLinear()` 方法：
|
||||
D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`:
|
||||
|
||||
`const scale = d3.scaleLinear()`
|
||||
|
||||
默认情况下，比例尺使用一比一的比例，输出的值和输入的值相同。在后面的章节中将涉及如何改变默认比例。
|
||||
By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.
|
||||
|
||||
# --instructions--
|
||||
|
||||
改变 `scale` 变量的值创建线性缩放，然后将 `output` 变量设置为 `scale` 函数（参数为 50）。
|
||||
Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of 50.
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 的文本应该为 50。
|
||||
The text in the `h2` should be 50.
|
||||
|
||||
```js
|
||||
assert($('h2').text() == '50');
|
||||
```
|
||||
|
||||
你应该使用 `scaleLinear` 方法。
|
||||
Your code should use the `scaleLinear()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.scaleLinear/g));
|
||||
```
|
||||
|
||||
`output` 变量应该调用输入参数为 50 的 scale 的值。
|
||||
The `output` variable should call `scale` with an argument of 50.
|
||||
|
||||
```js
|
||||
assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd7
|
||||
title: 使用 SVG Circles 创建散点图
|
||||
title: Create a Scatterplot with SVG Circles
|
||||
challengeType: 6
|
||||
forumTopicId: 301484
|
||||
dashedName: create-a-scatterplot-with-svg-circles
|
||||
@ -8,20 +8,20 @@ dashedName: create-a-scatterplot-with-svg-circles
|
||||
|
||||
# --description--
|
||||
|
||||
散点图是另一种形式的可视化。它用圆圈来映射数据点，每个数据点有两个值，这两个值和 `x` 和 `y` 轴相关联，在可视化中用来给圆圈定位。
|
||||
A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the `x` and `y` axes, and are used to position the circle in the visualization.
|
||||
|
||||
SVG 用 `circle` 标签来创建圆形，它和之前用来构建条形图的 `rect` 非常相像。
|
||||
SVG has a `circle` tag to create the circle shape. It works a lot like the `rect` elements you used for the bar chart.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `data()`、`enter()`、`append()` 方法将 `dataset` 和新添加到 SVG 画布上的 `circle` 元素绑定起来。
|
||||
Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas.
|
||||
|
||||
**注意**
|
||||
circles 并不可见，因为我们还没有设置它们的属性。我们会在下一个挑战来设置它。
|
||||
**Note**
|
||||
The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有 10 个 `circle` 元素。
|
||||
Your code should have 10 `circle` elements.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcc
|
||||
title: 用 SVG 显示形状
|
||||
title: Display Shapes with SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301485
|
||||
dashedName: display-shapes-with-svg
|
||||
@ -8,47 +8,47 @@ dashedName: display-shapes-with-svg
|
||||
|
||||
# --description--
|
||||
|
||||
上个挑战用给定的宽和高创建了一个 `svg` 元素，因为在它的 `style` 标签中有 `background-color`，所以它是可见的。这一段代码为给定的宽和高腾出空间。
|
||||
The last challenge created an `svg` element with a given width and height, which was visible because it had a `background-color` applied to it in the `style` tag. The code made space for the given width and height.
|
||||
|
||||
下一步是在 `svg` 区域中创建图形。SVG 支持多种图形，比如矩形和圆形，并用它们来显示数据。例如，在条形图中一个矩形（`<rect>`）SVG 图形可以创建一个组。
|
||||
The next step is to create a shape to put in the `svg` area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (`<rect>`) SVG shape could create a bar in a bar chart.
|
||||
|
||||
当把图形放入 `svg` 区域中时，你可以用 `x` 和 `y` 坐标来指定它的位置。起始点 (0,0) 是在左上角。`x` 正值将图形右移，`y` 正值将图形从原点下移
|
||||
When you place a shape into the `svg` area, you can specify where it goes with `x` and `y` coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for `x` push the shape to the right, and positive values for `y` push the shape down from the origin point.
|
||||
|
||||
若要把一个图形放在上个挑战的 500（宽）x 100（高）的 `svg` 中心，可将 `x` 坐标设置为 250，`y` 坐标设置为 50。
|
||||
To place a shape in the middle of the 500 (width) x 100 (height) `svg` from last challenge, the `x` coordinate would be 250 and the `y` coordinate would be 50.
|
||||
|
||||
SVG 的 `rect` 有四个属性。`x` 和 `y` 坐标指定图形放在 `svg` 区域的位置，`height` 和 `width` 指定图形大小。
|
||||
An SVG `rect` has four attributes. There are the `x` and `y` coordinates for where it is placed in the `svg` area. It also has a `height` and `width` to specify the size.
|
||||
|
||||
# --instructions--
|
||||
|
||||
用 `append()` 方法给 `svg` 添加一个 `rect` 图形。将它的 `width` 属性设置为 25，`height` 属性设置为 100，`x` 和 `y` 属性都设置为 0。
|
||||
Add a `rect` shape to the `svg` using `append()`, and give it a `width` attribute of 25 and `height` attribute of 100. Also, give the `rect` `x` and `y` attributes each set to 0.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的文档应该有 1 个 `rect` 元素。
|
||||
Your document should have 1 `rect` element.
|
||||
|
||||
```js
|
||||
assert($('rect').length == 1);
|
||||
```
|
||||
|
||||
`rect` 元素的 `width` 属性应该为 25。
|
||||
The `rect` element should have a `width` attribute set to 25.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('width') == '25');
|
||||
```
|
||||
|
||||
`rect` 元素的 `height` 属性应该为 100。
|
||||
The `rect` element should have a `height` attribute set to 100.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('height') == '100');
|
||||
```
|
||||
|
||||
`rect` 元素的 `x` 属性应该为 0。
|
||||
The `rect` element should have an `x` attribute set to 0.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('x') == '0');
|
||||
```
|
||||
|
||||
`rect` 元素的 `y` 属性应该为 0。
|
||||
The `rect` element should have a `y` attribute set to 0.
|
||||
|
||||
```js
|
||||
assert($('rect').attr('y') == '0');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bcf
|
||||
title: 动态更改每个条的高度
|
||||
title: Dynamically Change the Height of Each Bar
|
||||
challengeType: 6
|
||||
forumTopicId: 301486
|
||||
dashedName: dynamically-change-the-height-of-each-bar
|
||||
@ -8,7 +8,7 @@ dashedName: dynamically-change-the-height-of-each-bar
|
||||
|
||||
# --description--
|
||||
|
||||
和动态设置 `x` 值一样，每组的高也可以被设置成数组中数据点的值。
|
||||
The height of each bar can be set to the value of the data point in the array, similar to how the `x` value was set dynamically.
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
@ -21,62 +21,62 @@ selection.attr("property", (d, i) => {
|
||||
|
||||
# --instructions--
|
||||
|
||||
改变 `height` 属性的回调函数，让它返回数据值乘以 3 的值。
|
||||
Change the callback function for the `height` attribute to return the data value times 3.
|
||||
|
||||
**提示**
|
||||
记住，把所有数据点乘以相同的常数来对数据进行缩放（就像放大）。这有利于看清例子中每组之间的差异。
|
||||
**Note**
|
||||
Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.
|
||||
|
||||
# --hints--
|
||||
|
||||
第一个 `rect` 的 `height` 应该为 36。
|
||||
The first `rect` should have a `height` of 36.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('height') == '36');
|
||||
```
|
||||
|
||||
第二个 `rect` 的 `height` 应该为 93。
|
||||
The second `rect` should have a `height` of 93.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('height') == '93');
|
||||
```
|
||||
|
||||
第三个 `rect` 的 `height` 应该为 66。
|
||||
The third `rect` should have a `height` of 66.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('height') == '66');
|
||||
```
|
||||
|
||||
第四个 `rect` 的 `height` 应该为 51。
|
||||
The fourth `rect` should have a `height` of 51.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('height') == '51');
|
||||
```
|
||||
|
||||
第五个 `rect` 的 `height` 应该为 75。
|
||||
The fifth `rect` should have a `height` of 75.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('height') == '75');
|
||||
```
|
||||
|
||||
第六个 `rect` 的 `height` 应该为 54。
|
||||
The sixth `rect` should have a `height` of 54.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('height') == '54');
|
||||
```
|
||||
|
||||
第七个 `rect` 的 `height` 应该为 87。
|
||||
The seventh `rect` should have a `height` of 87.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('height') == '87');
|
||||
```
|
||||
|
||||
第八个 `rect` 的 `height` 应该为 42。
|
||||
The eighth `rect` should have a `height` of 42.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('height') == '42');
|
||||
```
|
||||
|
||||
第九个 `rect` 的 `height` 应该为 27。
|
||||
The ninth `rect` should have a `height` of 27.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('height') == '27');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: 动态设置每个 Bar 的坐标
|
||||
title: Dynamically Set the Coordinates for Each Bar
|
||||
challengeType: 6
|
||||
forumTopicId: 301487
|
||||
dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
@ -8,83 +8,83 @@ dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
|
||||
# --description--
|
||||
|
||||
上个挑战在 `svg` 元素中为 `dataset` 的每一个数据点创建并且添加了一个矩形。其中一个矩形表示一组，但是它们相互重叠。
|
||||
The last challenge created and appended a rectangle to the `svg` element for each point in `dataset` to represent a bar. Unfortunately, they were all stacked on top of each other.
|
||||
|
||||
矩形的摆放是由 `x` 和 `y` 属性处理的，它们告诉 D3 在 `svg` 区域的哪个位置开始绘制图形。上个挑战将它们都设置为 0，所以所有组都摆放在左上角。
|
||||
The placement of a rectangle is handled by the `x` and `y` attributes. They tell D3 where to start drawing the shape in the `svg` area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.
|
||||
|
||||
对于条形图，所有组应该处于相同的垂直水平上，也就是说所有组的 `y` 值相同（为 0），但是 `x` 值需要随着增添新的组而变化。注意 `x` 值越大图形就越靠近右边，所以当遍历 `dataset` 中的元素时，`x` 的值应该递增。
|
||||
For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the x value should increase.
|
||||
|
||||
D3 的 `attr()` 方法可接收一个回调函数来动态设置属性。这个回调函数有两个参数，一个是数据点本身（通常是 `d`），另一个是该数据点在数组中的下标，这个参数是可选的。下面是其格式：
|
||||
The `attr()` method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually `d`) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
/*
|
||||
* d 是数据点的值
|
||||
* i 是数据点在数组中的下标
|
||||
* d is the data point value
|
||||
* i is the index of the data point in the array
|
||||
*/
|
||||
})
|
||||
```
|
||||
|
||||
值得注意的是，你不需要写 `for` 循环或者用 `forEach` 迭代数据集中的对象。`data()` 方法会解析数据集，任何链接在它后面的方法都会为数据集中的每个对象运行一次。
|
||||
It's important to note that you do NOT need to write a `for` loop or use `forEach()` to iterate over the items in the data set. Recall that the `data()` method parses the data set, and any method that's chained after `data()` is run once for each item in the data set.
|
||||
|
||||
# --instructions--
|
||||
|
||||
改变 `x` 属性的回调函数，让它返回下标乘以 30 的值。
|
||||
Change the `x` attribute callback function so it returns the index times 30.
|
||||
|
||||
**提示**
|
||||
每组的宽为 25，所以每次 `x` 增加 30 可在每组之间留出一些空隙。在这个例子中任何比 25 大的数也同样适用。
|
||||
**Note**
|
||||
Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example.
|
||||
|
||||
# --hints--
|
||||
|
||||
第一个 `rect` 的 `x` 应该为 0。
|
||||
The first `rect` should have an `x` value of 0.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('x') == '0');
|
||||
```
|
||||
|
||||
第二个 `rect` 的 `x` 应该为 30。
|
||||
The second `rect` should have an `x` value of 30.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('x') == '30');
|
||||
```
|
||||
|
||||
第三个 `rect` 的 `x` 应该为 60。
|
||||
The third `rect` should have an `x` value of 60.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('x') == '60');
|
||||
```
|
||||
|
||||
第四个 `rect` 的 `x` 应该为 90。
|
||||
The fourth `rect` should have an `x` value of 90.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('x') == '90');
|
||||
```
|
||||
|
||||
第五个 `rect` 的 `x` 应该为 120。
|
||||
The fifth `rect` should have an `x` value of 120.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('x') == '120');
|
||||
```
|
||||
|
||||
第六个 `rect` 的 `x` 应该为 150。
|
||||
The sixth `rect` should have an `x` value of 150.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('x') == '150');
|
||||
```
|
||||
|
||||
第七个 `rect` 的 `x` 应该为 180。
|
||||
The seventh `rect` should have an `x` value of 180.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('x') == '180');
|
||||
```
|
||||
|
||||
第八个 `rect` 的 `x` 应该为 210。
|
||||
The eighth `rect` should have an `x` value of 210.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('x') == '210');
|
||||
```
|
||||
|
||||
第九个 `rect` 的 `x` 应该为 240。
|
||||
The ninth `rect` should have an `x` value of 240.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('x') == '240');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd0
|
||||
title: 反转 SVG 元素
|
||||
title: Invert SVG Elements
|
||||
challengeType: 6
|
||||
forumTopicId: 301488
|
||||
dashedName: invert-svg-elements
|
||||
@ -8,74 +8,74 @@ dashedName: invert-svg-elements
|
||||
|
||||
# --description--
|
||||
|
||||
你可能已经注意到了常见的条形图像是把这个翻转或者颠倒过来。这是因为 SVG 的 (x, y) 坐标有些特别。
|
||||
You may have noticed the bar chart looked like it's upside-down, or inverted. This is because of how SVG uses (x, y) coordinates.
|
||||
|
||||
在 SVG 中，坐标轴的原点在左上角。`x` 坐标为 0 将图形放在 SVG 区域的左边缘，`y` 坐标为 0 将图形放在 SVG 区域的上边缘。`x` 值增大矩形将向右移动，`y` 值增大矩形将向下移动。
|
||||
In SVG, the origin point for the coordinates is in the upper-left corner. An `x` coordinate of 0 places a shape on the left edge of the SVG area. A `y` coordinate of 0 places a shape on the top edge of the SVG area. Higher `x` values push the rectangle to the right. Higher `y` values push the rectangle down.
|
||||
|
||||
为了使条形图向上，需要改变 `y` 坐标计算的方式。这需要计算组的高度和 SVG 区域的总高度。
|
||||
To make the bars right-side-up, you need to change the way the `y` coordinate is calculated. It needs to account for both the height of the bar and the total height of the SVG area.
|
||||
|
||||
SVG 区域的高度为 100。如果在集合中一个数据点的值为 0，这组将从 SVG 区域的最底端开始（而不是顶端）。为此，`y` 坐标的值应为 100。如果数据点的值为 1，你将从 `y` 坐标为 100 开始来将这组设置在底端，然后需要考虑该组的高度为 1，所以最终的 `y` 坐标将是 99。
|
||||
The height of the SVG area is 100. If you have a data point of 0 in the set, you would want the bar to start at the bottom of the SVG area (not the top). To do this, the `y` coordinate needs a value of 100. If the data point value were 1, you would start with a `y` coordinate of 100 to set the bar at the bottom. Then you need to account for the height of the bar of 1, so the final `y` coordinate would be 99.
|
||||
|
||||
`y` 坐标为 `y = heightOfSVG - heightOfBar` 会将条形图向上放置。
|
||||
The `y` coordinate that is `y = heightOfSVG - heightOfBar` would place the bars right-side-up.
|
||||
|
||||
# --instructions--
|
||||
|
||||
改变 `y` 属性的回调函数，让条形图向上放置。`height` 的值是 3 倍 `d` 的值。
|
||||
Change the callback function for the `y` attribute to set the bars right-side-up. Remember that the `height` of the bar is 3 times the data value `d`.
|
||||
|
||||
**提示**
|
||||
通常，高度关系为 `y = h - m * d`，其中 `m` 是对数据点进行缩放的比例。
|
||||
**Note**
|
||||
In general, the relationship is `y = h - m * d`, where `m` is the constant that scales the data points.
|
||||
|
||||
# --hints--
|
||||
|
||||
第一个 `rect` 的 `y` 值应该为 64。
|
||||
The first `rect` should have a `y` value of 64.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
|
||||
```
|
||||
|
||||
第二个 `rect` 的 `y` 值应该为 7。
|
||||
The second `rect` should have a `y` value of 7.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
|
||||
```
|
||||
|
||||
第三个 `rect` 的 `y` 值应该为 34。
|
||||
The third `rect` should have a `y` value of 34.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
|
||||
```
|
||||
|
||||
第四个 `rect` 的 `y` 值应该为 49。
|
||||
The fourth `rect` should have a `y` value of 49.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
|
||||
```
|
||||
|
||||
第五个 `rect` 的 `y` 值应该为 25。
|
||||
The fifth `rect` should have a `y` value of 25.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
|
||||
```
|
||||
|
||||
第六个 `rect` 的 `y` 值应该为 46。
|
||||
The sixth `rect` should have a `y` value of 46.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
|
||||
```
|
||||
|
||||
第七个 `rect` 的 `y` 值应该为 13。
|
||||
The seventh `rect` should have a `y` value of 13.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
|
||||
```
|
||||
|
||||
第八个 `rect` 的 `y` 值应该为 58。
|
||||
The eighth `rect` should have a `y` value of 58.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
|
||||
```
|
||||
|
||||
第九个 `rect` 的 `y` 值应该为 73。
|
||||
The ninth `rect` should have a `y` value of 73.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcb
|
||||
title: 了解 D3 中的 SVG
|
||||
title: Learn About SVG in D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301489
|
||||
dashedName: learn-about-svg-in-d3
|
||||
@ -8,36 +8,36 @@ dashedName: learn-about-svg-in-d3
|
||||
|
||||
# --description--
|
||||
|
||||
SVG 是 `Scalable Vector Graphics` 的缩写。
|
||||
<dfn>SVG</dfn> stands for <dfn>Scalable Vector Graphics</dfn>.
|
||||
|
||||
"scalable" 的意思是如果放大或缩小一个对象，它不会像素化。不管是在小的移动手机屏幕上还是在大的电视显示器上它都会随着显示系统缩放。
|
||||
Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.
|
||||
|
||||
SVG 用于制作常见的几何图形。由于 D3 将数据映射成可视化表达，它用 SVG 来创建可视化的图形。网页上的 SVG 图形必须在 HTML 的 `svg` 标签中。
|
||||
SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML `svg` tag.
|
||||
|
||||
当使用相对单位（例如 `vh`、`vw` 或者百分比）时，CSS 是可伸缩的。但是在实现数据可视化的时候 SVG 更加的灵活。
|
||||
CSS can be scalable when styles use relative units (such as `vh`, `vw`, or percentages), but using SVG is more flexible to build data visualizations.
|
||||
|
||||
# --instructions--
|
||||
|
||||
用 `append()` 给 `body` 加一个 `svg` 节点。分别使用 `attr()` 给这个 `svg` 一个 `width` 属性和一个 `height` 属性，并分别将它们设置为给定的常量 `w` 和给定的常量 `h`。你可以在输出中看见它，因为在 `style` 标签中它的 `background-color` 设置为 pink。
|
||||
Add an `svg` node to the `body` using `append()`. Give it a `width` attribute set to the provided `w` constant and a `height` attribute set to the provided `h` constant using the `attr()` or `style()` methods for each. You'll see it in the output because there's a `background-color` of pink applied to it in the `style` tag.
|
||||
|
||||
**提示**
|
||||
`width` 和 `height` 属性没有单位，它们是来定义缩放的。但无论怎么缩放，这个 `svg` 元素的宽高比永远是 5:1 。
|
||||
**Note**
|
||||
When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的文档应该有 1 个 `svg` 元素。
|
||||
Your document should have 1 `svg` element.
|
||||
|
||||
```js
|
||||
assert($('svg').length == 1);
|
||||
```
|
||||
|
||||
`svg` 元素的 `width` 属性应该为 500。
|
||||
The `svg` element should have a `width` attribute set to 500 or styled to have a width of 500px.
|
||||
|
||||
```js
|
||||
assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
|
||||
```
|
||||
|
||||
`svg` 元素的 `height` 属性应该为 100。
|
||||
The `svg` element should have a `height` attribute set to 100 or styled to have a height of 100px.
|
||||
|
||||
```js
|
||||
assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc3
|
||||
title: 用 D3 选择一组元素
|
||||
title: Select a Group of Elements with D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301490
|
||||
dashedName: select-a-group-of-elements-with-d3
|
||||
@ -8,19 +8,19 @@ dashedName: select-a-group-of-elements-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
`selectAll()` 方法选择一组元素。它以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象。以下是一个选择文本中所有锚标签的例子：
|
||||
D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:
|
||||
|
||||
`const anchors = d3.selectAll("a");`
|
||||
|
||||
像 `select()` 方法一样，`selectAll()` 也支持链式调用，你可以在它之后调用其他方法。
|
||||
Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods.
|
||||
|
||||
# --instructions--
|
||||
|
||||
选择所有的 `li` 标签，通过 `.text()` 方法将它的文本改为 "list item" 。
|
||||
Select all of the `li` tags in the document, and change their text to "list item" by chaining the `.text()` method.
|
||||
|
||||
# --hints--
|
||||
|
||||
页面上应该有 3 个 `li` 元素，每个元素的文本内容应为 'list item'。大小写和空格必须一致。
|
||||
There should be 3 `li` elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,13 +30,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你应该能访问 `d3` 的对象。
|
||||
Your code should access the `d3` object.
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
你应该使用 `selectAll` 方法。
|
||||
Your code should use the `selectAll` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.selectAll/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdb
|
||||
title: 按比例设置域和范围
|
||||
title: Set a Domain and a Range on a Scale
|
||||
challengeType: 6
|
||||
forumTopicId: 301491
|
||||
dashedName: set-a-domain-and-a-range-on-a-scale
|
||||
@ -8,64 +8,64 @@ dashedName: set-a-domain-and-a-range-on-a-scale
|
||||
|
||||
# --description--
|
||||
|
||||
默认情况下，比例尺使用同一关系(identity relationship)，即输入值直接映射为输出值。但是比例尺可以更灵活更有趣。
|
||||
By default, scales use the identity relationship. This means the input value maps to the output value. However, scales can be much more flexible and interesting.
|
||||
|
||||
假设有一个数据集范围为 50 到 480，这是缩放比例尺的输入信息，也被称为域(domain)。
|
||||
Say a dataset has values ranging from 50 to 480. This is the input information for a scale, also known as the <dfn>domain</dfn>.
|
||||
|
||||
你想沿着 `x` 轴将这些点映射到 SVG 画布上，位置介于 10 个单位到 500 个单位之间。这是输出信息，也被称为范围(range)。
|
||||
You want to map those points along the `x` axis on the SVG canvas, between 10 units and 500 units. This is the output information, also known as the <dfn>range</dfn>.
|
||||
|
||||
`domain()` 和 `range()` 方法设置比例尺的值，它们都接受一个至少有两个元素的数组作为参数。下面是一个例子：
|
||||
The `domain()` and `range()` methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:
|
||||
|
||||
```js
|
||||
// 设置域
|
||||
// 域覆盖了一组输入值
|
||||
// Set a domain
|
||||
// The domain covers the set of input values
|
||||
scale.domain([50, 480]);
|
||||
// 设置范围
|
||||
// 范围覆盖了一组输出值
|
||||
// Set a range
|
||||
// The range covers the set of output values
|
||||
scale.range([10, 500]);
|
||||
scale(50) // 返回 10
|
||||
scale(480) // 返回 500
|
||||
scale(325) // 返回 323.37
|
||||
scale(750) // 返回 807.67
|
||||
scale(50) // Returns 10
|
||||
scale(480) // Returns 500
|
||||
scale(325) // Returns 323.37
|
||||
scale(750) // Returns 807.67
|
||||
d3.scaleLinear()
|
||||
```
|
||||
|
||||
注意，比例尺使用了域和范围之间的线性关系来找出给定数字的输出值。域中的最小值(50)映射为范围中的最小值(10)。
|
||||
Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个比例尺，将它的域设置为 `[250, 500]`，范围设置为 `[10, 150]`。
|
||||
Create a scale and set its domain to `[250, 500]` and range to `[10, 150]`.
|
||||
|
||||
**提示**
|
||||
你可以将 `domain()` 和 `range()` 方法链在 `scale` 变量后。
|
||||
**Note**
|
||||
You can chain the `domain()` and `range()` methods onto the `scale` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用 `domain()` 方法。
|
||||
Your code should use the `domain()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.domain/g));
|
||||
```
|
||||
|
||||
比例尺的 `domain()` 应该设置为 `[250, 500]`。
|
||||
The `domain()` of the scale should be set to `[250, 500]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
|
||||
```
|
||||
|
||||
你应该使用 `range()` 方法。
|
||||
Your code should use the `range()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.range/g));
|
||||
```
|
||||
|
||||
比例尺的 `range()` 应该设置为 `[10, 150]`。
|
||||
The `range()` of the scale should be set to `[10, 150]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
|
||||
```
|
||||
|
||||
`h2` 的文本应该为 -102。
|
||||
The text in the `h2` should be -102.
|
||||
|
||||
```js
|
||||
assert($('h2').text() == '-102');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd3
|
||||
title: 给 D3 标签添加样式
|
||||
title: Style D3 Labels
|
||||
challengeType: 6
|
||||
forumTopicId: 301492
|
||||
dashedName: style-d3-labels
|
||||
@ -8,21 +8,21 @@ dashedName: style-d3-labels
|
||||
|
||||
# --description--
|
||||
|
||||
D3 可以将样式添加到组标签中。`fill` 属性为 `text` 节点设置文本颜色，`style()` 方法设置其它样式的 CSS 规则，例如 "font-family"、"font-size"。
|
||||
D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as "font-family" or "font-size".
|
||||
|
||||
# --instructions--
|
||||
|
||||
将 `text` 元素的 `font-size` 设置为 25px，文本颜色设置为 red。
|
||||
Set the `font-size` of the `text` elements to 25px, and the color of the text to red.
|
||||
|
||||
# --hints--
|
||||
|
||||
所有标签的 `fill` 颜色应该是 red。
|
||||
The labels should all have a `fill` color of red.
|
||||
|
||||
```js
|
||||
assert($('text').css('fill') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
所有标签的 `font-size` 应该为 25 个像素。
|
||||
The labels should all have a `font-size` of 25 pixels.
|
||||
|
||||
```js
|
||||
assert($('text').css('font-size') == '25px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: 动态更新元素的高度
|
||||
title: Update the Height of an Element Dynamically
|
||||
challengeType: 6
|
||||
forumTopicId: 301493
|
||||
dashedName: update-the-height-of-an-element-dynamically
|
||||
@ -8,71 +8,71 @@ dashedName: update-the-height-of-an-element-dynamically
|
||||
|
||||
# --description--
|
||||
|
||||
之前的挑战包括如何从数组中显示数据和如何添加 CSS 类。将这些课程的内容结合起来只需两步你就能创建出一个简单的条形图：
|
||||
The previous challenges covered how to display data from an array and how to add CSS classes. You can combine these lessons to create a simple bar chart. There are two steps to this:
|
||||
|
||||
1) 为每一个数组中的数据点都创建一个 `div`
|
||||
1) Create a `div` for each data point in the array
|
||||
|
||||
2) 为每个 `div` 动态分配高度值，在 `style()` 方法中使用回调函数将高度值设置为数据大小
|
||||
2) Give each `div` a dynamic height, using a callback function in the `style()` method that sets height equal to the data value
|
||||
|
||||
回想使用回调函数设置样式的格式：
|
||||
Recall the format to set a style using a callback function:
|
||||
|
||||
`selection.style("cssProperty", (d) => d)`
|
||||
|
||||
# --instructions--
|
||||
|
||||
在编辑器中添加 `style()` 方法给每个元素设置 `height` 属性。使用回调函数返回数据点的值加上字符串 "px"。
|
||||
Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string "px" added to it.
|
||||
|
||||
# --hints--
|
||||
|
||||
第一个 `div` 的 `height` 应该为 12 个像素。
|
||||
The first `div` should have a `height` of 12 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(0)[0].style.height === '12px');
|
||||
```
|
||||
|
||||
第二个 `div` 的 `height` 应该为 31 个像素。
|
||||
The second `div` should have a `height` of 31 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(1)[0].style.height === '31px');
|
||||
```
|
||||
|
||||
第三个 `div` 的 `height` 应该为 22 个像素。
|
||||
The third `div` should have a `height` of 22 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(2)[0].style.height === '22px');
|
||||
```
|
||||
|
||||
第四个 `div` 的 `height` 应该为 17 个像素。
|
||||
The fourth `div` should have a `height` of 17 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(3)[0].style.height === '17px');
|
||||
```
|
||||
|
||||
第五个 `div` 的 `height` 应该为 25 个像素。
|
||||
The fifth `div` should have a `height` of 25 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(4)[0].style.height === '25px');
|
||||
```
|
||||
|
||||
第六个 `div` 的 `height` 应该为 18 个像素。
|
||||
The sixth `div` should have a `height` of 18 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(5)[0].style.height === '18px');
|
||||
```
|
||||
|
||||
第七个 `div` 的 `height` 应该为 29 个像素。
|
||||
The seventh `div` should have a `height` of 29 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(6)[0].style.height === '29px');
|
||||
```
|
||||
|
||||
第八个 `div` 的 `height` 应该为 14 个像素。
|
||||
The eighth `div` should have a `height` of 14 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(7)[0].style.height === '14px');
|
||||
```
|
||||
|
||||
第九个 `div` 的 `height` 应该为 9 个像素。
|
||||
The ninth `div` should have a `height` of 9 pixels.
|
||||
|
||||
```js
|
||||
assert($('div').eq(8)[0].style.height === '9px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bde
|
||||
title: 使用预定义的比例放置元素
|
||||
title: Use a Pre-Defined Scale to Place Elements
|
||||
challengeType: 6
|
||||
forumTopicId: 301494
|
||||
dashedName: use-a-pre-defined-scale-to-place-elements
|
||||
@ -8,32 +8,32 @@ dashedName: use-a-pre-defined-scale-to-place-elements
|
||||
|
||||
# --description--
|
||||
|
||||
当比例尺建立好后，是时候重新映射散点图了。比例尺就像操作函数一样，将 x 和 y 的原数据值变为适合并可在 SVG 画布上正确渲染的值。它们使数据在屏幕的布局区域内部。
|
||||
With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the x and y raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.
|
||||
|
||||
用比例尺函数为 SVG 图形设置坐标属性值。这包括 `rect` 或者 `text` 元素的 `x` 和 `y` 属性，或者 `circles` 的 `cx` 和 `cy`。以下是一个例子：
|
||||
You set the coordinate attribute values for an SVG shape with the scaling function. This includes `x` and `y` attributes for `rect` or `text` elements, or `cx` and `cy` for `circles`. Here's an example:
|
||||
|
||||
```js
|
||||
shape
|
||||
.attr("x", (d) => xScale(d[0]))
|
||||
```
|
||||
|
||||
比例尺设置图形坐标属性来将数据点放置在 SVG 画布上。当你显示实际数据值时，不用使用比例尺，例如，在提示框或标签中的 `text()` 方法。
|
||||
Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the `text()` method for a tooltip or label.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `xScale` 和 `yScale` 将 `circle` 和 `text` 图形放置在 SVG 画布上。对于 `circles`，使用比例尺设置 `cx` 和 `cy` 属性，半径为 5 个单位。
|
||||
Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of 5 units, too.
|
||||
|
||||
对于 `text` 元素，使用比例尺设置 `x` 和 `y` 属性。标签应该标注在点的右边，为此，在将 x 数据值传递给 `xScale` 之前要将它加上 10 个单位。
|
||||
For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add 10 units to the x data value before passing it to the `xScale`.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有 10 个 `circle` 元素。
|
||||
Your code should have 10 `circle` elements.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
在使用比例尺后第一个 `circle` 元素的 `cx` 值应该大约为 91，`cy` 值应该大约为 368。它的 `r` 值应该为 5。
|
||||
The first `circle` element should have a `cx` value of approximately 91 and a `cy` value of approximately 368 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第二个 `circle` 元素的 `cx` 值应该大约为 159，`cy` 值应该大约为 181。它的 `r` 值也应该为 5。
|
||||
The second `circle` element should have a `cx` value of approximately 159 and a `cy` value of approximately 181 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第三个 `circle` 元素的 `cx` 值应该大约为 340，`cy` 值应该大约为 329。它的 `r` 值也应该为 5。
|
||||
The third `circle` element should have a `cx` value of approximately 340 and a `cy` value of approximately 329 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +63,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第四个 `circle` 元素的 `cx` 值应该大约为 131，`cy` 值应该大约为 60。它的 `r` 值也应该为 5。
|
||||
The fourth `circle` element should have a `cx` value of approximately 131 and a `cy` value of approximately 60 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -73,7 +73,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第五个 `circle` 元素的 `cx` 值应该大约为 440，`cy` 值应该大约为 237。它的 `r` 值也应该为 5。
|
||||
The fifth `circle` element should have a `cx` value of approximately 440 and a `cy` value of approximately 237 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第六个 `circle` 元素的 `cx` 值应该大约为 271，`cy` 值应该大约为 306。它的 `r` 值也应该为 5。
|
||||
The sixth `circle` element should have a `cx` value of approximately 271 and a `cy` value of approximately 306 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -93,7 +93,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第七个 `circle` 元素的 `cx` 值应该大约为 361，`cy` 值应该大约为 351。它的 `r` 值也应该为 5。
|
||||
The seventh `circle` element should have a `cx` value of approximately 361 and a `cy` value of approximately 351 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -103,7 +103,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第八个 `circle` 元素的 `cx` 值应该大约为 261，`cy` 值应该大约为 132。它的 `r` 值也应该为 5。
|
||||
The eighth `circle` element should have a `cx` value of approximately 261 and a `cy` value of approximately 132 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -113,7 +113,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第九个 `circle` 元素的 `cx` 值应该大约为 131，`cy` 值应该大约为 144。它的 `r` 值也应该为 5。
|
||||
The ninth `circle` element should have a `cx` value of approximately 131 and a `cy` value of approximately 144 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -123,7 +123,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第十个 `circle` 元素的 `cx` 值应该大约为 79，`cy` 值应该大约为 326。它的 `r` 值也应该为 5。
|
||||
The tenth `circle` element should have a `cx` value of approximately 79 and a `cy` value of approximately 326 after applying the scales. It should also have an `r` value of 5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -133,13 +133,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你应该有 10 个 `text` 元素。
|
||||
Your code should have 10 `text` elements.
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
在使用比例尺后第一个标签的 `x` 值应该大约为 100，`y` 值应该大约为 368。
|
||||
The first label should have an `x` value of approximately 100 and a `y` value of approximately 368 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -148,7 +148,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第二个标签的 `x` 值应该大约为 168，`y` 值应该大约为 181。
|
||||
The second label should have an `x` value of approximately 168 and a `y` value of approximately 181 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -157,7 +157,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第三个标签的 `x` 值应该大约为 350，`y` 值应该大约为 329。
|
||||
The third label should have an `x` value of approximately 350 and a `y` value of approximately 329 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -166,7 +166,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第四个标签的 `x` 值应该大约为 141，`y` 值应该大约为 60。
|
||||
The fourth label should have an `x` value of approximately 141 and a `y` value of approximately 60 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -175,7 +175,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第五个标签的 `x` 值应该大约为 449，`y` 值应该大约为 237。
|
||||
The fifth label should have an `x` value of approximately 449 and a `y` value of approximately 237 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -184,7 +184,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第六个标签的 `x` 值应该大约为 280，`y` 值应该大约为 306。
|
||||
The sixth label should have an `x` value of approximately 280 and a `y` value of approximately 306 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -193,7 +193,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第七个标签的 `x` 值应该大约为 370，`y` 值应该大约为 351。
|
||||
The seventh label should have an `x` value of approximately 370 and a `y` value of approximately 351 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -202,7 +202,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第八个标签的 `x` 值应该大约为 270，`y` 值应该大约为 132。
|
||||
The eighth label should have an `x` value of approximately 270 and a `y` value of approximately 132 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -211,7 +211,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第九个标签的 `x` 值应该大约为 140，`y` 值应该大约为 144。
|
||||
The ninth label should have an `x` value of approximately 140 and a `y` value of approximately 144 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -220,7 +220,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
在使用比例尺后第十个标签的 `x` 值应该大约为 88，`y` 值应该大约为 326。
|
||||
The tenth label should have an `x` value of approximately 88 and a `y` value of approximately 326 after applying the scales.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: 使用动态比例
|
||||
title: Use Dynamic Scales
|
||||
challengeType: 6
|
||||
forumTopicId: 301495
|
||||
dashedName: use-dynamic-scales
|
||||
@ -8,13 +8,13 @@ dashedName: use-dynamic-scales
|
||||
|
||||
# --description--
|
||||
|
||||
D3 的 `min()` 和 `max()` 方法在设置比例尺时十分有用。
|
||||
The D3 `min()` and `max()` methods are useful to help set the scale.
|
||||
|
||||
对于一个复杂的数据集，首要是设置比例尺，这样可视化才能适合 SVG 容器的宽和高。所有数据都应布局在 SVG 画布内部，这样它们在页面上才是可见的。
|
||||
Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.
|
||||
|
||||
下面这个例子为散点图设置了 x 轴的比例尺。`domain()` 方法给比例尺传递关于散点图原数据值的信息，`range()` 方法给出在页面上进行可视化的实际空间信息。
|
||||
The example below sets the x-axis scale for scatter plot data. The `domain()` method passes information to the scale about the raw data values for the plot. The `range()` method gives it information about the actual space on the web page for the visualization.
|
||||
|
||||
在这个例子中，domain 是从 0 到数据集中的最大值，它使用 `max()` 方法和基于数组中 x 值的回调函数。range 使用 SVG 画布的宽(`w`)并包含 padding，这将在散点图和 SVG 画布边缘之间添加空隙。
|
||||
In the example, the domain goes from 0 to the maximum in the set. It uses the `max()` method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.
|
||||
|
||||
```js
|
||||
const dataset = [
|
||||
@ -32,37 +32,37 @@ const dataset = [
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
// SVG 画布边缘和散点图之间的 padding
|
||||
// Padding between the SVG canvas boundary and the plot
|
||||
const padding = 30;
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
```
|
||||
|
||||
在一开始可能很难理解 padding。想象 x 轴是一条从 0 到 500 （SVG 画布宽的值）的水平直线。在 `range()` 方法中包含 padding 使散点图沿着这条直线从 30 （而不是 0）开始，在 470 （而不是 500）结束。
|
||||
The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the `range()` method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `yScale` 变量创建一个线性的 y 轴比例尺。`domain` 应该从 0 开始到数据集中 y 的最大值，range 应该使用 SVG 的高(`h`)并包含 padding。
|
||||
Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum y value in the set. The range should use the SVG height (`h`) and include padding.
|
||||
|
||||
**提示**
|
||||
记得正向布局。当你为 y 坐标设置 range 时，大的值（height 减去 padding）是第一个参数，小的值是第二个参数。
|
||||
**Note**
|
||||
Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 中的文本应该是 30。
|
||||
The text in the `h2` should be 30.
|
||||
|
||||
```js
|
||||
assert(output == 30 && $('h2').text() == '30');
|
||||
```
|
||||
|
||||
yScale 的 `domain()` 应该等于 `[0, 411]`。
|
||||
The `domain()` of yScale should be equivalent to `[0, 411]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
|
||||
```
|
||||
|
||||
yScale 的 `range()` 应该等于 `[470, 30]`。
|
||||
The `range()` of yScale should be equivalent to `[470, 30]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdc
|
||||
title: 使用 d3.max 和 d3.min 函数在数据集中查找最小值和最大值
|
||||
title: >-
|
||||
Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
|
||||
challengeType: 6
|
||||
forumTopicId: 301496
|
||||
dashedName: >-
|
||||
@ -9,45 +10,45 @@ dashedName: >-
|
||||
|
||||
# --description--
|
||||
|
||||
D3 的 `domain()` 和 `range()` 方法根据数据设置比例尺的信息。下面有几种更简单的方法。
|
||||
The D3 methods `domain()` and `range()` set that information for your scale based on the data. There are a couple methods to make that easier.
|
||||
|
||||
通常当你设置域的时候，你会想用数据集中的最小值和最大值。试图手动的找到这些值，尤其是在很大的数据集中，可能会出错。
|
||||
Often when you set the domain, you'll want to use the minimum and maximum values within the data set. Trying to find these values manually, especially in a large data set, may cause errors.
|
||||
|
||||
D3 有两个方法——`min()` 和 `max()` 来返回这些值。下面是一个例子：
|
||||
D3 has two methods - `min()` and `max()` to return this information. Here's an example:
|
||||
|
||||
```js
|
||||
const exampleData = [34, 234, 73, 90, 6, 52];
|
||||
d3.min(exampleData) // 返回 6
|
||||
d3.max(exampleData) // 返回 234
|
||||
d3.min(exampleData) // Returns 6
|
||||
d3.max(exampleData) // Returns 234
|
||||
```
|
||||
|
||||
像在散点图的例子中的 \[x, y] 坐标对一样，数据集有可能嵌套数组。在这种情况下，你需要告诉 D3 怎么计算最大值和最小值。幸运的是，`min()` 和 `max()` 都可以使用回调函数。 在下面这个例子中，回调函数的参数 `d` 是当前的内部数组。回调函数需要从内部数组中返回你想计算最大/小值的元素（x 还是 y 值）。下面是一个如何找到二维数组的最大值和最小值的例子：
|
||||
A dataset may have nested arrays, like the \[x, y] coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum. Fortunately, both the `min()` and `max()` methods take a callback function. In this example, the callback function's argument `d` is for the current inner array. The callback needs to return the element from the inner array (the x or y value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:
|
||||
|
||||
```js
|
||||
const locationData = [[1, 7],[6, 3],[8, 3]];
|
||||
// 返回第一个元素中的最小值s
|
||||
// Returns the smallest number out of the first elements
|
||||
const minX = d3.min(locationData, (d) => d[0]);
|
||||
// 在 1，6，8 中 minX 为 1
|
||||
// minX compared 1, 6, and 8 and is set to 1
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`positionData` 数组中有包含 x、y、z 坐标的子数组。用 D3 的方法去找到数组中 z 坐标（第三个值）的最大值并将它保存在 `output` 变量中。
|
||||
The `positionData` array holds sub arrays of x, y, and z coordinates. Use a D3 method to find the maximum value of the z coordinate (the third value) from the arrays and save it in the `output` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 的文本应该为 8。
|
||||
The text in the `h2` should be 8.
|
||||
|
||||
```js
|
||||
assert(output == 8 && $('h2').text() == '8');
|
||||
```
|
||||
|
||||
你应该使用 `max()` 方法。
|
||||
Your code should use the `max()` method.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.max/g),
|
||||
'Your code should use the <code>max()</code> method.'
|
||||
'Your code should use the <code>max()</code> method.'
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc4
|
||||
title: 使用 D3 中的数据
|
||||
title: Work with Data in D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301497
|
||||
dashedName: work-with-data-in-d3
|
||||
@ -8,15 +8,15 @@ dashedName: work-with-data-in-d3
|
||||
|
||||
# --description--
|
||||
|
||||
D3 是数据驱动的库,可以使用 D3 的方法将数组形式的数据显示在页面上。
|
||||
The D3 library focuses on a data-driven approach. When you have a set of data, you can apply D3 methods to display it on the page. Data comes in many formats, but this challenge uses a simple array of numbers.
|
||||
|
||||
第一步是让 D3 知道数据。`data` 方法选择连接着数据的 DOM 元素,数据集作为参数传递给该方法。
|
||||
The first step is to make D3 aware of the data. The `data()` method is used on a selection of DOM elements to attach the data to those elements. The data set is passed as an argument to the method.
|
||||
|
||||
常见的方法是在文档中为数据集中的每一个数据创建一个元素，为此，你可以使用 D3 的 `enter()` 方法
|
||||
A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the `enter()` method for this purpose.
|
||||
|
||||
当 `enter()` 和 `data()` 方法一起使用时，它把从页面中选择的元素和数据集中的元素作比较。如果页面中选择的元素较少则创建缺少的元素。
|
||||
When `enter()` is combined with the `data()` method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.
|
||||
|
||||
以下是一个选择 `ul` 元素并根据添加的数组创建新的列表项的例子。
|
||||
Here is an example that selects a `ul` element and creates a new list item based on the number of entries in the array:
|
||||
|
||||
```html
|
||||
<body>
|
||||
@ -32,21 +32,21 @@ D3 是数据驱动的库,可以使用 D3 的方法将数组形式的数据显示
|
||||
</body>
|
||||
```
|
||||
|
||||
选择不存在的 li 元素似乎有些难以理解。事实上，这段代码先选择页面上的 ul 元素，再选择所有的列表项——li，它将返回空。然后data()方法接收数组作为参数，并运行三次后面的代码，每次对应数组中的一个对象。enter()方法发现页面中没有 li 元素，但是需要 3 个（每个对应dataset中的一个对象）。它将在 ul 中添加带有文本 "New item" 的 li 元素。
|
||||
It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text "New item".
|
||||
|
||||
# --instructions--
|
||||
|
||||
选择 `body` 节点，然后选择所有的 `h2` 元素。让 D3 为 `dataset` 数组中的每一个对象创建并添加文本为 "New Title" 的 `h2` 标签。你应该使用 `data()` 和 `enter()` 方法。
|
||||
Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say "New Title". Your code should use the `data()` and `enter()` methods.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的文档应该有 9 个 `h2` 元素。
|
||||
Your document should have 9 `h2` elements.
|
||||
|
||||
```js
|
||||
assert($('h2').length == 9);
|
||||
```
|
||||
|
||||
`h2` 元素中的文本应为 'New Title'。大小写和空格必须一致。
|
||||
The text in the `h2` elements should say "New Title". The capitalization and spacing should match exactly.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,13 +56,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你应该使用 `data()` 方法。
|
||||
Your code should use the `data()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.data/g));
|
||||
```
|
||||
|
||||
你应该使用 `enter()` 方法。
|
||||
Your code should use the `enter()` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.enter/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: 使用 D3 中的动态数据
|
||||
title: Work with Dynamic Data in D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301498
|
||||
dashedName: work-with-dynamic-data-in-d3
|
||||
@ -8,73 +8,73 @@ dashedName: work-with-dynamic-data-in-d3
|
||||
|
||||
# --description--
|
||||
|
||||
最后两个挑战涉及到使用 D3 的 `data()` 和 `enter()` 方法来动态展示数据。它们以数据集为参数，和 `append()` 方法一起使用，为数据集中的每一个元素对象创建一个 DOM 元素。
|
||||
The last two challenges cover the basics of displaying data dynamically with D3 using the `data()` and `enter()` methods. These methods take a data set and, together with the `append()` method, create a new DOM element for each entry in the data set.
|
||||
|
||||
在之前的挑战中，你为 `dataset` 数组中的每一个对象创建了一个新的 `h2` 元素，但是它们的文本都是相同的 "New Title"。 这是因为你还没有使用和每个 `h2` 元素关联的数据。
|
||||
In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, "New Title". This is because you have not made use of the data that is bound to each of the `h2` elements.
|
||||
|
||||
`text()` 方法以字符串或者回调函数作为参数：
|
||||
The D3 `text()` method can take a string or a callback function as an argument:
|
||||
|
||||
`selection.text((d) => d)`
|
||||
|
||||
上面这个例子中的参数 `d` 指关联数据集的一个对象。
|
||||
In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to.
|
||||
|
||||
以当前例子为例，第一个 `h2` 元素和 12 关联，第二个 `h2` 元素和 31 关联，第三个 `h2` 元素和 22 关联，以此类推。
|
||||
Using the current example as context, the first `h2` element is bound to 12, the second `h2` element is bound to 31, the third `h2` element is bound to 22, and so on.
|
||||
|
||||
# --instructions--
|
||||
|
||||
改变 `text()` 方法使得每个 `h2` 元素显示 `dataset` 数组中的对应值加上一个空格和 "USD"。例如，第一个标题应该为 "12 USD"。
|
||||
Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and "USD". For example, the first heading should be "12 USD".
|
||||
|
||||
# --hints--
|
||||
|
||||
第一个 <code>h2<code> 的文本应该为 '12 USD'。
|
||||
The first `h2` should have the text "12 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).text() == '12 USD');
|
||||
```
|
||||
|
||||
第二个 <code>h2<code> 的文本应该为 '31 USD'。
|
||||
The second `h2` should have the text "31 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).text() == '31 USD');
|
||||
```
|
||||
|
||||
第三个 <code>h2<code> 的文本应该为 '22 USD'。
|
||||
The third `h2` should have the text "22 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).text() == '22 USD');
|
||||
```
|
||||
|
||||
第四个 <code>h2<code> 的文本应该为 '17 USD'。
|
||||
The fourth `h2` should have the text "17 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).text() == '17 USD');
|
||||
```
|
||||
|
||||
第五个 <code>h2<code> 的文本应该为 '25 USD'。
|
||||
The fifth `h2` should have the text "25 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).text() == '25 USD');
|
||||
```
|
||||
|
||||
第六个 <code>h2<code> 的文本应该为 '18 USD'。
|
||||
The sixth `h2` should have the text "18 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).text() == '18 USD');
|
||||
```
|
||||
|
||||
第七个 <code>h2<code> 的文本应该为 '29 USD'。
|
||||
The seventh `h2` should have the text "29 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).text() == '29 USD');
|
||||
```
|
||||
|
||||
第八个 <code>h2<code> 的文本应该为 '14 USD'。
|
||||
The eighth `h2` should have the text "14 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).text() == '14 USD');
|
||||
```
|
||||
|
||||
第九个 <code>h2<code> 的文本应该为 '9 USD'。
|
||||
The ninth `h2` should have the text "9 USD".
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).text() == '9 USD');
|
||||
|
||||
Reference in New Issue
Block a user