chore(i8n,learn): processed translations (#41350)
* chore(i8n,learn): processed translations * fix: restore deleted test * fix: revert casing change Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
committed by
GitHub
parent
8e4ada8f2d
commit
aff0ea700d
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: Add a Hover Effect to a D3 Element
|
||||
title: 给 D3 元素添加悬停效果
|
||||
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--
|
||||
|
||||
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.
|
||||
我们可以为用户的鼠标悬停行为添加高亮显示的效果。 到目前为止,矩形的样式应用了内置的 D3 和 SVG 方法,但是你也可以使用 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.
|
||||
你可以使用 `attr()` 方法在 SVG 元素上设置 CSS class。 然后用 `:hover` 伪类为你新添加的 CSS 类设置鼠标悬停的效果。
|
||||
|
||||
# --instructions--
|
||||
|
||||
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.
|
||||
用 `attr()` 方法给所有的 `rect` 元素都添加 `bar` class。 当鼠标悬停在元素上时,它的 `fill` 将变为棕色。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `rect` elements should have a class of `bar`.
|
||||
`rect` 元素应该有 `bar` class。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('class') == 'bar');
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
title: 给 D3 元素添加工具提示
|
||||
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--
|
||||
|
||||
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.
|
||||
当用户在一个对象上悬停时,提示框可以显示关于这个对象更多的信息。 在可视化中有多种方法添加提示框,这个挑战将使用 SVG 的 `title` 元素。
|
||||
|
||||
`title` pairs with the `text()` method to dynamically add data to the bars.
|
||||
`title` 和 `text()` 方法一起给每组动态添加数据。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Append a `title` element under each `rect` node. Then call the `text()` method with a callback function so the text displays the data value.
|
||||
在每个 `rect` 节点下附加 `title` 元素。 然后用回调函数调用 `text()` 方法使它的文本显示数据值。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 9 `title` elements.
|
||||
你应该有 9 个 `title` 元素。
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
The first `title` element should have tooltip text of 12.
|
||||
第一个 `title` 元素的提示框文本应为 12。
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
The second `title` element should have tooltip text of 31.
|
||||
第二个 `title` 元素的提示框文本应为 31。
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
The third `title` element should have tooltip text of 22.
|
||||
第三个 `title` 元素的提示框文本应为 22。
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
The fourth `title` element should have tooltip text of 17.
|
||||
第四个 `title` 元素的提示框文本应为 17。
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
The fifth `title` element should have tooltip text of 25.
|
||||
第五个 `title` 元素的提示框文本应为 25。
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
The sixth `title` element should have tooltip text of 18.
|
||||
第六个 `title` 元素的提示框文本应为 18。
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
The seventh `title` element should have tooltip text of 29.
|
||||
第七个 `title` 元素的提示框文本应为 29。
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
The eighth `title` element should have tooltip text of 14.
|
||||
第八个 `title` 元素的提示框文本应为 14。
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
The ninth `title` element should have tooltip text of 9.
|
||||
第九个 `title` 元素的提示框文本应为 9。
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
title: 给 Circle 元素添加属性
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
@ -8,27 +8,27 @@ dashedName: add-attributes-to-the-circle-elements
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
上个挑战为 `dataset` 中的每个点都创建了 `circle` 元素,并将它们添加到 SVG 画布上。 但是 D3 需要更多关于位置和 `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`.
|
||||
在 SVG 中 `circle` 有三个主要的属性。 `cx` 和 `cy` 属性是坐标。 它们告诉 D3 将图形的*中心*放在 SVG 画布的何处。 半径( `r` 属性)给出 `circle` 的大小。
|
||||
|
||||
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.
|
||||
和 `rect` 的 `y` 坐标一样,`circle` 的 `cy` 属性是从 SVG 画布的顶端开始测量的,而不是从底端。
|
||||
|
||||
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.
|
||||
所有的属性都可以用回调函数来动态设值。 记住,所有串联在 `data(dataset)` 后面的方法会为 `dataset` 中的每个对象都运行一次。 回调函数中的 `d` 参数指在 `dataset` 中的当前对象,对每个点来说都是一个数组。 你可以使用方括号的方式,如 `d[0]`,来访问数组中的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
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.
|
||||
为 `circle` 元素添加 `cx`、`cy`、`r` 属性。 `cx` 的值应该是 `dataset` 中每个对象的数组的第一个数, `cy` 的值应该根据数组中的第二个值,但是要确保正向显示图表而不是倒转。 所有圆圈的 `r` 的值应该为 5。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
你应该有 10 个 `circle` 元素。
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
The first `circle` element should have a `cx` value of 34, a `cy` value of 422, and an `r` value of 5.
|
||||
第一个 `circle` 元素的 `cx` 值应该为 34,`cy` 值应该为 422,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `circle` element should have a `cx` value of 109, a `cy` value of 220, and an `r` value of 5.
|
||||
第二个 `circle` 元素的 `cx` 值应该为 109,`cy` 值应该为 220,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third `circle` element should have a `cx` value of 310, a `cy` value of 380, and an `r` value of 5.
|
||||
第三个 `circle` 元素的 `cx` 值应该为 310,`cy` 值应该为 380,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth `circle` element should have a `cx` value of 79, a `cy` value of 89, and an `r` value of 5.
|
||||
第四个 `circle` 元素的 `cx` 值应该为 79,`cy` 值应该为 89,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth `circle` element should have a `cx` value of 420, a `cy` value of 280, and an `r` value of 5.
|
||||
第五个 `circle` 元素的 `cx` 值应该为 420,`cy` 值应该为 280,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -78,7 +78,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth `circle` element should have a `cx` value of 233, a `cy` value of 355, and an `r` value of 5.
|
||||
第六个 `circle` 元素的 `cx` 值应该为 233,`cy` 值应该为 355,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -88,7 +88,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh `circle` element should have a `cx` value of 333, a `cy` value of 404, and an `r` value of 5.
|
||||
第七个 `circle` 元素的 `cx` 值应该为 333,`cy` 值应该为 404,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -98,7 +98,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth `circle` element should have a `cx` value of 222, a `cy` value of 167, and an `r` value of 5.
|
||||
第八个 `circle` 元素的 `cx` 值应该为 222,`cy` 值应该为 167,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -108,7 +108,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth `circle` element should have a `cx` value of 78, a `cy` value of 180, and an `r` value of 5.
|
||||
第九个 `circle` 元素的 `cx` 值应该为 78,`cy` 值应该为 180,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -118,7 +118,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth `circle` element should have a `cx` value of 21, a `cy` value of 377, and an `r` value of 5.
|
||||
第十个 `circle` 元素的 `cx` 值应该为 21,`cy` 值应该为 377,`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
title: 添加坐标轴到视图中
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
@ -8,15 +8,15 @@ dashedName: add-axes-to-a-visualization
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to improve the scatter plot is to add an x-axis and a y-axis.
|
||||
另一种改进散点图的方法是添加 x 轴和 y 轴。
|
||||
|
||||
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:
|
||||
D3 有两种方法来渲染 y 轴和 x 轴,分别是 `axisLeft()` 和 `axisBottom()`。 下面是一个基于上个挑战中的 `xScale` 创建 x 轴的例子:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
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:
|
||||
下一步是在 SVG 画布上渲染 x 轴。 为此,你可以使用一个 SVG 组件, `g` 元素, `g` 是英文中组(group)的缩写。 不同于 `rect`、`circle`、`text`,在渲染时,轴只是一条直线。 因为它是一个简单的图形,所以可以用 `g` 。 最后一步是使用 `transform` 属性将轴放置在 SVG 画布的正确位置上。 否则,轴将会沿着 SVG 画布的边缘渲染,从而不可见。 SVG 支持多种 `transforms`,但是定位轴需要使用 `translate` 属性。 当它应用在 `g` 元素上时,它根据给出的总量移动整组。 下面是一个例子:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
@ -26,21 +26,21 @@ svg.append("g")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
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.
|
||||
上部分代码将 x 轴放置在 SVG 画布的底端。 然后 x 轴作为参数被传递给 `call()` 方法。 除了 `translate` 的参数变成 (x, 0) ,y 轴的定位也是一样的。 因为 `translate` 是 `attr()` 方法中的一个字符串,你可以在参数中使用字符串的连接将变量值包括进去。
|
||||
|
||||
# --instructions--
|
||||
|
||||
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.
|
||||
现在散点图有 x 轴了。 用 `axisLeft()` 方法创建 y 轴并赋值给 `yAxis` 变量, 然后通过 `g` 元素渲染 y 轴。 确保用 `transform` 属性将 y 轴向右平移 padding 个单位,向下平移 0 个单位。 记得对 y 轴调用 `call()` 方法。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
|
||||
你应该使用 `axisLeft()` 方法,并传入 `yScale` 作为参数。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
The y-axis `g` element should have a `transform` attribute to translate the axis by (60, 0).
|
||||
y 轴的 `g` 元素应该有一个 `transform` 属性来将 y 轴平移(60,0)。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `yAxis`.
|
||||
你应该调用(call) `yAxis` 。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
title: 用 D3 添加 Class
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
@ -8,27 +8,27 @@ dashedName: add-classes-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
即使对小型 app 来说,在 HTML 元素中大量使用内联样式也十分难以管理。 给元素添加类,并使用 CSS 规则给类添加样式会更加方便。 D3 中的 `attr()` 方法可以给元素添加任何 HTML 属性,包括 class 名称。
|
||||
|
||||
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:
|
||||
`attr()` 方法和 `style()` 的使用方法一样。 它使用逗号分隔值,并且可以使用回调函数。 这里是一个给选中元素添加 class 名为 "container" 的例子:
|
||||
|
||||
`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.
|
||||
请注意,当你需要添加类时,“class" 参数不会发生改变,只有 "container" 参数会发生变化。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements.
|
||||
将 `attr()` 方法添加到编辑器的代码中,并在 `div` 元素上添加一个 `bar` 类。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` elements should have a class of `bar`.
|
||||
`div` 元素应该有值为 `bar` 的类。
|
||||
|
||||
```js
|
||||
assert($('div').attr('class') == 'bar');
|
||||
```
|
||||
|
||||
Your code should use the `attr()` method.
|
||||
你应该使用 `attr()` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: Add Document Elements with D3
|
||||
title: 用 D3 给文档添加元素
|
||||
challengeType: 6
|
||||
forumTopicId: 301474
|
||||
dashedName: add-document-elements-with-d3
|
||||
@ -8,21 +8,21 @@ dashedName: add-document-elements-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
D3 has several methods that let you add and change elements in your document.
|
||||
D3 有多种方法可以用来在文档中增加元素、修改元素。
|
||||
|
||||
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:
|
||||
`select()` 方法从文档中选择一个元素。 它接受你想要选择的元素的名字作为参数,并返回文档中第一个与名字匹配的 HTML 节点。 以下是一个例子:
|
||||
|
||||
`const anchor = d3.select("a");`
|
||||
|
||||
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.
|
||||
上面这个例子找到页面上的第一个锚点标签,将它作为一个 HTML 节点保存在变量 `anchor` 中。 你也可以用其他的方法选择页面上的元素。 例子中的 "d3" 是对 D3 对象的引用,可以通过它来访问 D3 的方法。
|
||||
|
||||
Two other useful methods are `append()` and `text()`.
|
||||
另外两个有用的方法是 `append()` 和 `text()` 。
|
||||
|
||||
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.
|
||||
`append()` 方法接受你希望添加到文档中的元素作为参数, 它将一个 HTML 节点添加到选中的对象上,并返回那个节点的句柄。
|
||||
|
||||
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.
|
||||
`text()` 方法既可以给选中的节点设置文本,也可以获取节点的当前文本。 如果要设置文本值,需要方法的括号中传入一个字符串参数。
|
||||
|
||||
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 allows you to chain several methods together with periods to perform a number of actions in a row.
|
||||
在 D3 中可以串联多个方法,连续执行一系列操作。
|
||||
|
||||
# --instructions--
|
||||
|
||||
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.
|
||||
使用 `select` 方法选择文档中的 `body` 标签。 然后用 `append` 方法为它添加一个 `h1` 标签,同时在 `h1` 中添加文本 "Learning D3"。
|
||||
|
||||
# --hints--
|
||||
|
||||
The `body` should have one `h1` element.
|
||||
`body` 元素应该包含一个 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert($('body').children('h1').length == 1);
|
||||
```
|
||||
|
||||
The `h1` element should have the text "Learning D3" in it.
|
||||
`h1` 元素应该包含文本 'Learning D3'。
|
||||
|
||||
```js
|
||||
assert($('h1').text() == 'Learning D3');
|
||||
```
|
||||
|
||||
Your code should access the `d3` object.
|
||||
你应该能访问 `d3` 对象。
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
Your code should use the `select` method.
|
||||
你应该使用 `select` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.select/g));
|
||||
```
|
||||
|
||||
Your code should use the `append` method.
|
||||
你应该使用 `append` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
Your code should use the `text` method.
|
||||
你应该使用 `text` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.text/g));
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: Add Inline Styling to Elements
|
||||
title: 给元素添加内联样式
|
||||
challengeType: 6
|
||||
forumTopicId: 301475
|
||||
dashedName: add-inline-styling-to-elements
|
||||
@ -8,25 +8,25 @@ dashedName: add-inline-styling-to-elements
|
||||
|
||||
# --description--
|
||||
|
||||
D3 lets you add inline CSS styles on dynamic elements with the `style()` method.
|
||||
D3允许你使用 `style()` 方法在动态元素上添加内联 CSS 样式。
|
||||
|
||||
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:
|
||||
`style()` 方法以用逗号分隔的键值对作为参数。 这里是一个将选中文本的颜色设为蓝色的例子:
|
||||
|
||||
`selection.style("color","blue");`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `style()` method to the code in the editor to make all the displayed text have a `font-family` of `verdana`.
|
||||
在编辑器中添加 `style()` 方法,使所有显示的文本都有 `font-family` 属性,且值为 `verdana`。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` elements should have a `font-family` of verdana.
|
||||
`h2` 元素应该有 `font-family` 属性,且值为 verdana。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-family') == 'verdana');
|
||||
```
|
||||
|
||||
Your code should use the `style()` method.
|
||||
你应该使用 `style()` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.style/g));
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: Add Labels to D3 Elements
|
||||
title: 给 D3 元素添加标签
|
||||
challengeType: 6
|
||||
forumTopicId: 301476
|
||||
dashedName: add-labels-to-d3-elements
|
||||
@ -8,70 +8,70 @@ dashedName: add-labels-to-d3-elements
|
||||
|
||||
# --description--
|
||||
|
||||
D3 lets you label a graph element, such as a bar, using the SVG `text` element.
|
||||
D3 允许你使用 SVG 的 `text` 元素给图形元素,如条形图,添加标签。
|
||||
|
||||
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.
|
||||
和 `rect` 元素类似,`text` 元素也需要 `x` 和 `y` 属性来指定其放置在 SVG 画布上的位置, 它也需要能够获取数据来显示数据值。
|
||||
|
||||
D3 gives you a high level of control over how you label your bars.
|
||||
D3 给了你很高的权限给图形添加标签。
|
||||
|
||||
# --instructions--
|
||||
|
||||
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` 元素。 首先,在 `svg` 中添加 `text` 节点。 然后,添加 `x` 和 `y` 坐标属性, 它们的计算方法应该和 `rect` 中计算方法相同,除了 `text` 的 `y` 值应该使标签比条形图的高 3 个单位。 最后,用 D3 的 `text()` 方法将标签设置为和数据点相等的值。
|
||||
|
||||
**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.
|
||||
**提示**
|
||||
关于标签比条形图高,想一想 `text` 的 `y` 值应该比条形图的 `y` 值大 3 还是小 3。
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `text` element should have a label of 12 and a `y` value of 61.
|
||||
第一个 `text` 元素应该有一个值为 12 的标签,并且 `y` 值为 61。
|
||||
|
||||
```js
|
||||
assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
|
||||
```
|
||||
|
||||
The second `text` element should have a label of 31 and a `y` value of 4.
|
||||
第二个 `text` 元素应该有一个值为 31 的标签,并且 `y` 值为 4。
|
||||
|
||||
```js
|
||||
assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
|
||||
```
|
||||
|
||||
The third `text` element should have a label of 22 and a `y` value of 31.
|
||||
第三个 `text` 元素应该有一个值为 22 的标签,并且 `y` 值为 31。
|
||||
|
||||
```js
|
||||
assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
|
||||
```
|
||||
|
||||
The fourth `text` element should have a label of 17 and a `y` value of 46.
|
||||
第四个 `text` 元素应该有一个值为 17 的标签,并且 `y` 值为 46。
|
||||
|
||||
```js
|
||||
assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
|
||||
```
|
||||
|
||||
The fifth `text` element should have a label of 25 and a `y` value of 22.
|
||||
第五个 `text` 元素应该有一个值为 25 的标签,并且 `y` 值为 22。
|
||||
|
||||
```js
|
||||
assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
|
||||
```
|
||||
|
||||
The sixth `text` element should have a label of 18 and a `y` value of 43.
|
||||
第六个 `text` 元素应该有一个值为 18 的标签,并且 `y` 值为 43。
|
||||
|
||||
```js
|
||||
assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
|
||||
```
|
||||
|
||||
The seventh `text` element should have a label of 29 and a `y` value of 10.
|
||||
第七个 `text` 元素应该有一个值为 29 的标签,并且 `y` 值为 10。
|
||||
|
||||
```js
|
||||
assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
|
||||
```
|
||||
|
||||
The eighth `text` element should have a label of 14 and a `y` value of 55.
|
||||
第八个 `text` 元素应该有一个值为 14 的标签,并且 `y` 值为 55。
|
||||
|
||||
```js
|
||||
assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
|
||||
```
|
||||
|
||||
The ninth `text` element should have a label of 9 and a `y` value of 70.
|
||||
第九个 `text` 元素应该有一个值为 9 的标签,并且 `y` 值为 70。
|
||||
|
||||
```js
|
||||
assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: Add Labels to Scatter Plot Circles
|
||||
title: 向散点图的 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.
|
||||
你可以为散点图中的点添加文本来创建标签。
|
||||
|
||||
The goal is to display the comma-separated values for the first (`x`) and second (`y`) fields of each item in `dataset`.
|
||||
目标是显示 `dataset` 中每个对象的第一个(`x`)和第二个(`y`)字段中通过逗号分隔的值。
|
||||
|
||||
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.
|
||||
`text` 节点需要 `x` 和 `y` 属性来指定放置在 SVG 画布中的位置。 在这个挑战中,`y` 值(决定高度)可以用和 `circle` 的 `cy` 属性相同的值, `x` 值可以比 `circle` 的 `cx` 值稍微大一些,这样标签才可见, 并且被放置在散点的右边。
|
||||
|
||||
# --instructions--
|
||||
|
||||
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`.
|
||||
使用 `text` 元素标记散点图上的每个点。 标签的文本应该是用逗号和空格分隔的两个值。 例如,第一个点的标签为 "34, 78"。 设置 `x` 属性,使其比 `circle` 上 `cx` 属性使用的值多5个单位。 设置 `y` 属性的方式与 `circle` 上的 `cy` 值相同。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `text` elements.
|
||||
你应该有 10 个 `text` 元素。
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
The first label should have text of "34, 78", an `x` value of 39, and a `y` value of 422.
|
||||
第一个标签的文本应该为 '34, 78', `x` 值应该为 39, `y` 应该为 422。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second label should have text of "109, 280", an `x` value of 114, and a `y` value of 220.
|
||||
第二个标签的文本应该为 '109, 280', `x` 值应该为 114, `y` 应该为 220。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,7 +46,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third label should have text of "310, 120", an `x` value of 315, and a `y` value of 380.
|
||||
第三个标签的文本应该为 '310, 120', `x` 值应该为 315, `y` 应该为 380。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth label should have text of "79, 411", an `x` value of 84, and a `y` value of 89.
|
||||
第四个标签的文本应该为 '79, 411', `x` 值应该为 84, `y` 应该为 89。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth label should have text of "420, 220", an `x` value of 425, and a `y` value of 280.
|
||||
第五个标签的文本应该为 '420, 220', `x` 值应该为 425, `y` 应该为 280。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -76,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth label should have text of "233, 145", an `x` value of 238, and a `y` value of 355.
|
||||
第六个标签的文本应该为 '233, 145', `x` 值应该为 238, `y` 应该为 355。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -86,7 +86,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh label should have text of "333, 96", an `x` value of 338, and a `y` value of 404.
|
||||
第七个标签的文本应该为 '333, 96', `x` 值应该为 338, `y` 应该为 404。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -96,7 +96,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth label should have text of "222, 333", an `x` value of 227, and a `y` value of 167.
|
||||
第八个标签的文本应该为 '222, 333', `x` 值应该为 227, `y` 应该为 167。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -106,7 +106,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth label should have text of "78, 320", an `x` value of 83, and a `y` value of 180.
|
||||
第九个标签的文本应该为 '78, 320', `x` 值应该为 83, `y` 应该为 180。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -116,7 +116,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth label should have text of "21, 123", an `x` value of 26, and a `y` value of 377.
|
||||
第十个标签的文本应该为 '21, 123', `x` 值应该为 26, `y` 应该为 377。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
Reference in New Issue
Block a user