feat: audit for data visualization projects (#40612)
* feat: audit for data visualization projects * feat: translate data visualization curriculum
This commit is contained in:
Nicky Xu
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: 添加坐标轴到可视化中
|
||||
title: 添加坐标轴到视图中
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
---
|
||||
@ -9,17 +9,19 @@ forumTopicId: 301472
|
||||
|
||||
另一种改进散点图的方法是添加 x 轴和 y 轴。
|
||||
|
||||
D3 有两种方法来渲染 y 轴和 x 轴，分别是 `axisLeft` 和 `axisBottom`。下面是一个基于上个挑战中的 `xScale` 创建 x 轴的例子：
|
||||
D3 有两种方法来渲染 y 轴和 x 轴，分别是 `axisLeft()` 和 `axisBottom()`。下面是一个基于上个挑战中的 `xScale` 创建 x 轴的例子：
|
||||
|
||||
`const xAxis = d3.axisBottom(xScale);`
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
下一步是在 SVG 画布上渲染 x 轴。为此，你可以使用一个常见的 SVG 组件， `g` 元素，`g` 是英文中组(group)的缩写。
|
||||
下一步是在 SVG 画布上渲染 x 轴。为此，你可以使用一个 SVG 组件， `g` 元素，`g` 是英文中组(group)的缩写。
|
||||
|
||||
不同于 `rect`、`circle`、`text`，在渲染时，轴只是一条直线。因为它是一个简单的图形，所以可以用 `g` 。
|
||||
|
||||
最后一步是使用 `transforms` 属性将轴放置在 SVG 画布的正确位置上。否则，轴将会沿着 SVG 画布的边缘渲染，从而不可见。
|
||||
最后一步是使用 `transform` 属性将轴放置在 SVG 画布的正确位置上。否则，轴将会沿着 SVG 画布的边缘渲染，从而不可见。
|
||||
|
||||
SVG 支持多种 `transforms`，但是放置轴需要 `translate`。当它应用在 `g` 元素上时，它根据给出的总量移动整组。下面是一个例子：
|
||||
SVG 支持多种 `transform`，但是定位轴需要使用 `translate` 属性。当它应用在 `g` 元素上时，它根据给出的总量移动整组。下面是一个例子：
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
@ -29,21 +31,21 @@ svg.append("g")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
上部分代码将 x 轴放置在 SVG 画布的底端。然后 x 轴作为参数被传递给 `call` 方法。 除了 `translate` 的参数是 (x,0) 格式的，y 轴也是一样的。因为 `translate` 是上面 `attr` 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。
|
||||
上部分代码将 x 轴放置在 SVG 画布的底端。然后 x 轴作为参数被传递给 `call` 方法。 除了 `translate` 的参数变成 (x,0) ，y 轴的定位也是一样的。因为 `translate` 是 `attr` 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。
|
||||
|
||||
# --instructions--
|
||||
|
||||
现在散点图有 x 轴了。用 `axisLeft` 方法在变量 `yAxis` 中创建 y 轴，然后用 `g` 元素渲染 y 轴。确保用 `transform` 属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。记得 `call()` y 轴。
|
||||
现在散点图有 x 轴了。用 `axisLeft` 方法创建 y 轴并赋值给 `yAxis` 变量，然后通过 `g` 元素渲染 y 轴。确保用 `transform` 属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。记得 `call()` y 轴。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用参数为 `yScale`的`axisLeft()` 方法。
|
||||
你应该使用参数为 `yScale` 的 `axisLeft()` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
y 轴的 `g`元素应该有一个`transform` 属性来将 y 轴平移( 60，0 )。
|
||||
y 轴的 `g`元素应该有一个`transform` 属性来将 y 轴平移（60，0）。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: 为集合中的每个数据点创建一个 Bar
|
||||
title: 为集合中的每个数据点创建一个数据条
|
||||
challengeType: 6
|
||||
forumTopicId: 301482
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
上个挑战仅仅在 `svg` 中添加了一个矩形来表示一组。接下来你将结合到目前为止所学的关于 `data()`、`enter()`、SVG 图形的知识，为 `dataset` 中的每一个数据点创建并且添加一个矩形。
|
||||
上个挑战在 `svg` 中只添加了一个矩形来表示数据条。接下来你将结合到目前为止所学的关于 `data()`、`enter()` 和 SVG 图形的知识，为 `dataset` 中的每一个数据点创建并且添加一个矩形。
|
||||
|
||||
之前的挑战展示了如何为 `dataset` 中的每个对象创建并添加一个 `div`：
|
||||
|
||||
@ -18,15 +18,15 @@ d3.select("body").selectAll("div")
|
||||
.append("div")
|
||||
```
|
||||
|
||||
`rect` 元素和 `div` 有一些不同，`rect` 必须添加在 `svg` 元素内，而不能直接添加在 `body` 内。同时，你需要告诉 D3 将 `rect` 放在 `svg` 区域的哪个位置。组的放置会在下一个挑战中讲到。
|
||||
操作 `rect` 元素和 `div` 有一些不同，`rect` 必须添加在 `svg` 元素内，而不能直接添加在 `body` 内。同时，你需要告诉 D3 将 `rect` 放在 `svg` 区域的哪个位置。条形的放置会在下一个挑战中讲到。
|
||||
|
||||
# --instructions--
|
||||
|
||||
用 `data()`、`enter()`、`append()` 方法为 `dataset` 中的每一个对象创建并添加一个 `rect` 。每一组都将直接显示在上一组的上面，将上一组覆盖，这将会在下一个挑战中得到修改。
|
||||
用 `data()`、`enter()`、`append()` 方法为 `dataset` 中的每一个对象创建并添加一个 `rect` 。每个数据条都将直接显示在上一个数据条的上面，将上一个数据条覆盖，这将会在下一个挑战中得到修改。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的文档应该有 9 个 `rect` 元素。
|
||||
你的代码应该包含 9 个 `rect` 元素。
|
||||
|
||||
```js
|
||||
assert($('rect').length == 9);
|
||||
|
||||
@ -9,11 +9,11 @@ forumTopicId: 301491
|
||||
|
||||
默认情况下，比例尺使用同一关系(identity relationship)，即输入值直接映射为输出值。但是比例尺可以更灵活更有趣。
|
||||
|
||||
假设有一个数据集范围为 50 到 480，这是缩放的输入信息，也被称为域(domain)。
|
||||
假设有一个数据集范围为 50 到 480，这是缩放比例尺的输入信息，也被称为域(domain)。
|
||||
|
||||
你想沿着 10 个单位到 500 个单位的 `x` 轴映射这些点到 SVG 画布上。这是输出信息，也被称为范围(range)。
|
||||
你想沿着 `x` 轴将这些点映射到 SVG 画布上，位置介于 10 个单位到 500 个单位之间。这是输出信息，也被称为范围(range)。
|
||||
|
||||
`domain()` 和 `range()` 方法设置缩放的值，它们都以至少有两个元素的数组为参数。下面是一个例子：
|
||||
`domain()` 和 `range()` 方法设置比例尺的值，它们都接受一个至少有两个元素的数组作为参数。下面是一个例子：
|
||||
|
||||
```js
|
||||
// 设置域
|
||||
@ -36,7 +36,7 @@ d3.scaleLinear()
|
||||
创建一个比例尺，将它的域设置为 `[250, 500]`，范围设置为 `[10, 150]`。
|
||||
|
||||
**提示**
|
||||
你可以将 `domain()` 和 `range()` 方法串联在 `scale` 变量后。
|
||||
你可以将 `domain()` 和 `range()` 方法链在 `scale` 变量后。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,9 +7,9 @@ forumTopicId: 301496
|
||||
|
||||
# --description--
|
||||
|
||||
D3 的方法 `domain()` 和 `range()` 根据数据设置比例尺的信息。下面有几种更简单的方法。
|
||||
D3 的 `domain()` 和 `range()` 方法根据数据设置比例尺的信息。下面有几种更简单的方法。
|
||||
|
||||
通常当你设置域的时候，你会想用数据集中的最小值和最大值。尤其是在很大的数据集中，尝试手动的找到这些值可能会出错。
|
||||
通常当你设置域的时候，你会想用数据集中的最小值和最大值。试图手动的找到这些值，尤其是在很大的数据集中，可能会出错。
|
||||
|
||||
D3 有两个方法——`min()` 和 `max()` 来返回这些值。下面是一个例子：
|
||||
|
||||
@ -19,7 +19,7 @@ d3.min(exampleData) // 返回 6
|
||||
d3.max(exampleData) // 返回 234
|
||||
```
|
||||
|
||||
像在散点图的例子中的 \[x, y] 坐标对一样，数据集有可能嵌套数组。在这种情况下，你需要告诉 D3 怎么计算最大值和最小值。 辛运的是，`min()` 和 `max()` 都可以使用回调函数。 在下面这个例子中，回调函数的参数 `d` 是当前的内数组。回调函数需要从内数组中返回你想比较大小的元素（x 还是 y 值）。下面是一个如何找到二维数组的最大值和最小值的例子：
|
||||
像在散点图的例子中的 \[x, y] 坐标对一样，数据集有可能嵌套数组。在这种情况下，你需要告诉 D3 怎么计算最大值和最小值。幸运的是，`min()` 和 `max()` 都可以使用回调函数。 在下面这个例子中，回调函数的参数 `d` 是当前的内部数组。回调函数需要从内部数组中返回你想计算最大/小值的元素（x 还是 y 值）。下面是一个如何找到二维数组的最大值和最小值的例子：
|
||||
|
||||
```js
|
||||
const locationData = [[1, 7],[6, 3],[8, 3]];
|
||||
@ -30,7 +30,7 @@ const minX = d3.min(locationData, (d) => d[0]);
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `positionData` 变量中保存一个三维数组。用 D3 的方法去找到数组中 z 坐标（第三个值）的最大值并将它保存在 `output` 变量中。
|
||||
`positionData` 数组中有包含 x、y、z 坐标的子数组。用 D3 的方法去找到数组中 z 坐标（第三个值）的最大值并将它保存在 `output` 变量中。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user