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: 587d7fa6367417b2b2512bbf
|
||||
title: 用地区分布图可视化数据
|
||||
title: 用等值区域图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
---
|
||||
@ -11,36 +11,36 @@ forumTopicId: 301465
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**需求 #1：** 我的地区分布图应该有一个具有`id="title"`属性的标题。
|
||||
**需求 #1：** 等值区域图包含一个具有`id="title"`属性的标题。
|
||||
|
||||
**需求 #2：** 我的地区分布图应该有一个具有`id="description"`属性的描述内容。
|
||||
**需求 #2：** 等值区域图包含一个具有`id="description"`属性的描述内容。
|
||||
|
||||
**需求 #3：** 我的地区分布图应该有一些州县来展示数据，这些州县应该具有`class="county"`属性。
|
||||
**需求 #3：** 等值区域图包含一些州县来展示数据，这些州县应该具有`class="county"`属性。
|
||||
|
||||
**需求 #4：** 这些州县至少应该有 4 种不同的填充颜色。
|
||||
|
||||
**需求 #5：** 我的每个州县都应该具有`data-fips`和`data-education`属性，分别包含他们相应的 fips 值和教育值。
|
||||
**需求 #5：** 每个州县都应该具有`data-fips`和`data-education`属性，分别包含他们相应的 fips 值和教育值。
|
||||
|
||||
**需求 #6：** 在我的地区分布图中，每一个提供的数据点都应该有一个对应的州县。
|
||||
**需求 #6：** 在等值区域图中，每一个提供的数据点都应该有一个对应的州县。
|
||||
|
||||
**需求 #7：** 各个州县应该具有与样本数据匹配的 fips 值和教育值。
|
||||
|
||||
**需求 #8：** 我的地区分布图应该有一个具有`id="legend"`属性的图例。
|
||||
**需求 #8：** 等值区域图包含一个具有`id="legend"`属性的图例。
|
||||
|
||||
**需求 #9：** 这些图例至少应该使用 4 种不同的填充颜色。
|
||||
**需求 #9：** 图例至少应该使用 4 种不同的填充颜色。
|
||||
|
||||
**需求 #10：** 我可以将鼠标悬停在某个区域上，并查看具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
|
||||
**需求 #10：** 将鼠标悬停在某个区域上时，可以看到具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**需求 #11：** 我的提示框应该有一个`data-education`属性，它对应了当前激活区域的code>data-education属性。
|
||||
**需求 #11：** 提示框应该有`data-education`属性，它对应了当前激活区域的`data-education`属性。
|
||||
|
||||
以下是完成此项目所需的数据集：
|
||||
|
||||
- **US Education Data:** `https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:** `https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json`
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
|
||||
@ -11,45 +11,45 @@ forumTopicId: 301466
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**需求 #1：** 我的热度图应该有一个具有`id="title"`属性的标题。
|
||||
**需求 #1：** 热度图包含一个具有`id="title"`属性的标题。
|
||||
|
||||
**需求 #2：** 我的热度图应该有一个具有`id="title"`属性的描述内容。
|
||||
**需求 #2：** 热度图包含一个具有`id="description"`属性的描述内容。
|
||||
|
||||
**需求 #3：** 我的热度图应该有一个具有`id="x-axis"`属性的 x 轴。
|
||||
**需求 #3：** 热度图包含一个具有`id="x-axis"`属性的 x 轴。
|
||||
|
||||
**需求 #4：** 我的热度图应该有一个具有`id="y-axis"`属性的 y 轴。
|
||||
**需求 #4：** 热度图包含一个具有`id="y-axis"`属性的 y 轴。
|
||||
|
||||
**需求 #5：** 我的热度图应该有一些`rect`元素来展示数据，他们具有`class="cell"`属性。
|
||||
**需求 #5：** 热度图包含一些`rect`元素来展示数据，他们具有`class="cell"`属性。
|
||||
|
||||
**需求 #6：** 这些单元格元素至少应该有 4 种不同的填充颜色。
|
||||
|
||||
**需求 #7：** 每个单元格元素都有这些属性`data-month`，`data-year`，`data-temp`，包含了它们相应的月份，年份和温度值。
|
||||
**需求 #7：** 每个单元格元素都有这些属性`data-month`，`data-year`，`data-temp`，包含了它们相应的月份、年份和温度值。
|
||||
|
||||
**需求 #8：** 每个元素的`data-month`，`data-year`属性应该在数据范围内。
|
||||
|
||||
**需求 #9：** 我的热度图应该具有与 y 轴上的相应月份对齐的单元格。
|
||||
**需求 #9：** 热度图包含与 y 轴上的相应月份对齐的单元格。
|
||||
|
||||
**需求 #10：** 我的热度图应该具有与 x 轴上相应年份对齐的单元格。
|
||||
**需求 #10：** 热度图包含与 x 轴上相应年份对齐的单元格。
|
||||
|
||||
**需求 #11：** 我的热度图应该在 y 轴上有多个刻度标签，并带有完整的月份名称。
|
||||
**需求 #11：** 热度图在 y 轴上有多个刻度标签，并带有完整的月份名称。
|
||||
|
||||
**需求 #12：** 我的热度图应该在 x 轴上有多个刻度标签，年份在 1754 到 2015 之间。
|
||||
**需求 #12：** 热度图在 x 轴上有多个刻度标签，年份在 1754 到 2015 之间。
|
||||
|
||||
**需求 #13：** 我的热度图应该有一个具有`id="legend"`属性的图例。
|
||||
**需求 #13：** 热度图包含一个具有`id="legend"`属性的图例。
|
||||
|
||||
**需求 #14：** 我的图例应该包含一些`rect`元素。
|
||||
**需求 #14：** 图例包含一些`rect`元素。
|
||||
|
||||
**需求 #15：** 图例中的这些`rect`元素应该至少使用 4 种不同的填充颜色。
|
||||
|
||||
**需求 #16：** 我可以将鼠标悬停在某个区域上，并查看具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
|
||||
**需求 #16：** 将鼠标悬停在某个区域上时，可以看到具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**需求 #17：** 我的提示框应该有一个`data-year`属性，它对应了当前激活区域的`data-year`属性。
|
||||
**需求 #17：** 提示框应该有`data-year`属性，它对应了当前激活区域的`data-year`属性。
|
||||
|
||||
以下是完成此项目所需的数据：`https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
|
||||
@ -13,15 +13,15 @@ forumTopicId: 301467
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**需求 #1：** 我能看到一个具有`id="title"`属性的标题元素。
|
||||
**需求 #1：** 散点图包含一个具有`id="title"`属性的标题元素。
|
||||
|
||||
**需求 #2：** 我能看到一个具有`id="x-axis"`属性的 x 轴。
|
||||
**需求 #2：** 散点图包含一个具有`id="x-axis"`属性的 x 轴。
|
||||
|
||||
**需求 #3：** 我能看到一个具有`id="y-axis"`属性的 y 轴。
|
||||
**需求 #3：** 散点图包含一个具有`id="y-axis"`属性的 y 轴。
|
||||
|
||||
**需求 #4：** 我可以看到一些点，每个点都有一个值为`dot`的 class 属性，它代表了被绘制的数据。
|
||||
**需求 #4：** 散点图包含一些点，每个点都有一个值为`dot`的 class 属性，它代表了被绘制的数据。
|
||||
|
||||
**需求 #5：** 每个点都应具有`data-xvalue`属性和`data-yvalue`属性，其中包含相应的 x 和 y 值。
|
||||
**需求 #5：** 每个点都应具有`data-xvalue`属性和`data-yvalue`属性，对应这个点的 x 和 y 值。
|
||||
|
||||
**需求 #6：** 每个点的`data-xvalue`属性和`data-yvalue`属性应该在实际数据的范围内，并且数据格式应该正确无误。对于`data-xvalue`属性，可以接受整数（全年）或 Date 对象进行测试评估。对于`data-yvalue`属性（分钟），请使用 Date 对象。
|
||||
|
||||
@ -29,25 +29,25 @@ forumTopicId: 301467
|
||||
|
||||
**需求 #8：** `data-yvalue`属性和它对应的点应该和 y 轴上的点或值对齐。
|
||||
|
||||
**需求 #9：** 我可以在 y 轴上看到多个时间格式为`%M:%S`的刻度标签。
|
||||
**需求 #9：** 散点图的 y 轴上有多个时间格式为`%M:%S`的刻度标签。
|
||||
|
||||
**需求 #10：** 我可以在 x 轴上看到显示年份的多个刻度标签。
|
||||
**需求 #10：** 散点图的 x 轴上有多个显示年份的刻度标签。
|
||||
|
||||
**需求 #11：** 我可以看到 x 轴标签的范围在实际 x 轴数据的范围内。
|
||||
**需求 #11：** 散点图的 x 轴标签的范围在实际 x 轴数据的范围内。
|
||||
|
||||
**需求 #12：** 我可以看到 y 轴标签的范围在实际 y 轴数据的范围内。
|
||||
**需求 #12：** 散点图的 y 轴标签的范围在实际 y 轴数据的范围内。
|
||||
|
||||
**需求 #13：** 我可以看到一个包含描述性文字的图例，它具有`id="legend"`属性。
|
||||
**需求 #13：** 散点图包含一个包含描述性文字的图例，它具有`id="legend"`属性。
|
||||
|
||||
**需求 #14：** 我可以将鼠标悬停在某个区域上，并查看具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
|
||||
**需求 #14：** 将鼠标悬停在某个区域上时，可以看到具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**需求 #15：** 我的提示框应该有一个`data-year`属性，它对应了当前激活区域的`data-xvalue`属性。
|
||||
**需求 #15：** 提示框应该有`data-year`属性，它对应了当前激活区域的`data-xvalue`属性。
|
||||
|
||||
以下是完成此项目所需的数据：`https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
一旦你完成了本项目并且通过所有测试，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -13,11 +13,11 @@ forumTopicId: 301468
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**需求 #1：** 我的矩阵树图应该有一个具有`id="title"`属性的标题。
|
||||
**需求 #1：** 矩阵树图包含一个具有`id="title"`属性的标题。
|
||||
|
||||
**需求 #2：** 我的矩阵树图应该有一个具有`id="description"`属性的描述内容。
|
||||
**需求 #2：** 矩阵树图包含一个具有`id="description"`属性的描述内容。
|
||||
|
||||
**需求 #3：** 我的矩阵树图应该有一些具有`class="tile"`属性的`rect`元素来展示数据。
|
||||
**需求 #3：** 矩阵树图包含一些具有`class="tile"`属性的`rect`元素来展示数据。
|
||||
|
||||
**需求 #4：** 这些矩形块元素至少应该有 2 种不同的填充颜色。
|
||||
|
||||
@ -25,15 +25,15 @@ forumTopicId: 301468
|
||||
|
||||
**需求 #6：** 每个矩形块的面积和它的 data-value 属性值相对应：data-value 值越大的矩形块面积越大。
|
||||
|
||||
**需求 #7：** 我的矩阵树图应该有一个具有`id="legend"`属性的图例。
|
||||
**需求 #7：** 矩阵树图包含一个具有`id="legend"`属性的图例。
|
||||
|
||||
**需求 #8：** 我的图例应该有一些具有`class="legend-item"`属性的`rect`元素。
|
||||
**需求 #8：** 图例包含一些具有`class="legend-item"`属性的`rect`元素。
|
||||
|
||||
**需求 #9：** 图例中的这些`rect`元素至少应该使用 2 种不同的填充颜色。
|
||||
|
||||
**需求 #10：** 我可以将鼠标悬停在某个区域上，并查看具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
|
||||
**需求 #10：** 将鼠标悬停在某个区域上时，可以看到具有`id="tooltip"`属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**需求 #11：** 我的提示框应该有一个`data-value`属性，它对应了当前激活区域的code>data-value属性。
|
||||
**需求 #11：** 提示框应该有`data-value`属性，它对应了当前激活区域的`data-value`属性。
|
||||
|
||||
对于此项目，您可以使用以下任何数据集：
|
||||
|
||||
@ -41,7 +41,7 @@ forumTopicId: 301468
|
||||
- **Movie Sales：** `https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales：** `https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`.
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
|
||||
@ -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,11 +31,11 @@ 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--
|
||||
|
||||
@ -43,7 +45,7 @@ svg.append("g")
|
||||
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--
|
||||
|
||||
|
||||
@ -7,13 +7,13 @@ forumTopicId: 16807
|
||||
|
||||
# --description--
|
||||
|
||||
现在你可以从 JSON API 获取数据了，你可以在 HTML 中显示它。
|
||||
现在你从 JSON API 获取了数据，可以在 HTML 中显示它们了。
|
||||
|
||||
既然 cat photo 对象保存在数组里，你可以使用`forEach`方法来遍历它。当你拿到每个对象时，你就可以修改 HTML 元素了。
|
||||
既然 cat photo 对象都保存在数组里，你可以使用 `forEach` 方法来遍历它们。当你拿到每个对象时，你就可以修改 HTML 元素了。
|
||||
|
||||
首先，用`let html = "";`声明一个变量。
|
||||
首先，通过 `let html = "";` 声明一个 html 变量。
|
||||
|
||||
接着，遍历 JSON，将 HTML 添加到用`strong`标记键名的变量，后面跟着值。当循环结束后渲染它。
|
||||
接着，遍历 JSON，将用 `strong` 标签包裹的键名和后面跟着值的 html 元素添加给变量。当循环结束后渲染它。
|
||||
|
||||
这是执行此操作的代码：
|
||||
|
||||
@ -29,11 +29,11 @@ json.forEach(function(val) {
|
||||
});
|
||||
```
|
||||
|
||||
**注意：** 在本挑战需要给页面添加一个新的 HTML 元素，不能使用 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
|
||||
**注意：** 在本挑战中，你需要给页面添加新的 HTML 元素，不能依赖 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
|
||||
|
||||
# --instructions--
|
||||
|
||||
添加一个`forEach`循环 JSON 数据的方法，并创建 HTML 元素以显示它。
|
||||
添加一个 `forEach` 循环来遍历 JSON 数据，并创建 HTML 元素以显示它。
|
||||
|
||||
以下是一个 JSON 示例：
|
||||
|
||||
@ -63,7 +63,7 @@ assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
|
||||
assert(code.match(/json\.forEach/g));
|
||||
```
|
||||
|
||||
你的代码应该将键名包装在`strong`标签中。
|
||||
你的代码应该用 `strong` 标签包裹键名。
|
||||
|
||||
```js
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301504
|
||||
|
||||
# --description--
|
||||
|
||||
在前面的示例中，你在外部资源获取数据，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
|
||||
在前面的示例中，你通过外部资源获取数据。此外，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
|
||||
|
||||
JavaScript 的`XMLHttpRequest`方法也用于将数据发布到服务器，这是个例子：
|
||||
|
||||
@ -25,11 +25,11 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
```
|
||||
|
||||
你在之前见过其中几种方法。这里`open`方法将请求初始化为对外部资源的给定 URL 的 "POST"，并使用`true`布尔值使其异步。 `setRequestHeader`方法设置HTTP请求标头的值，该标头包含有关发送人和请求的信息。它必须在`open`方法之后调用，但在`send`方法之前调用。这两个参数是标题的名称和要设置为该标题正文的值。 接下来，`onreadystatechange`事件侦听器处理请求状态的更改。`readyState`为 4 表示操作完成，`status`200表示操作成功。文档的HTML可以更新。 最后，该`send`方法发送带有`userName`值的请求，该值由用户在`input`字段中给出。
|
||||
你之前已经见过这些方法。`open` 方法根据给定的外部资源的 URL 初始化一个 POST 请求，参数 `true` 表示请求是异步执行的。 `setRequestHeader` 方法设置了 HTTP 请求标头的值，该标头包含有关发送人和请求的信息。它必须在 `open` 方法之后、`send` 方法之前调用。它的两个参数表示标头的内容类型和标头数据将被设置成什么值。 接下来，`onreadystatechange` 事件监听器监听请求状态的更改。`readyState` 为 4 表示操作完成，`status` 为 201 表示请求成功，此时文档的 HTML 可以更新了。 最后，`send` 方法发送带有 `body` 值的请求，其中 `userName` 的值由用户在 `input` 字段中输入。
|
||||
|
||||
# --instructions--
|
||||
|
||||
更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。在这种情况下，你的名字附加 " loves cats"。
|
||||
更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，并点击 "Send Message"。你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。修改返回的请求结果，在你的名字前加上 " loves cats"。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -39,13 +39,13 @@ xhr.send(body);
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
你的代码应该使用该`open`方法初始化到服务器的 'POST' 请求。
|
||||
你的代码应该使用 `open` 方法初始化一个发送给服务器的 'POST' 请求。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
```
|
||||
|
||||
你的代码应该使用该`setRequestHeader`方法。
|
||||
你的代码应该使用 `setRequestHeader` 方法。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -55,13 +55,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该有一个`onreadystatechange`设置为函数的事件处理程序。
|
||||
你的代码应该有一个 `onreadystatechange` 的事件监听器。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
```
|
||||
|
||||
你的代码应该使用类获取元素`message`并将其内部HTML更改为`responseText`。
|
||||
你的代码应该获取 class 为 `message` 的元素，并将它的 `textContent` 更改为 "`userName` loves cats"。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -71,7 +71,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该使用该`send`方法。
|
||||
你的代码应该使用 `send` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
|
||||
Reference in New Issue
Block a user