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:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
8e4ada8f2d
commit
aff0ea700d
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Bar Chart
|
||||
title: 用条形图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301464
|
||||
dashedName: visualize-data-with-a-bar-chart
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/GrZVaM> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 通过 D3 测试需要这些刻度，因为它们的位置被用来确定绘制元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**User Story #1:** My chart should have a title with a corresponding `id="title"`.
|
||||
**需求 #1：** 图表应该包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
**User Story #2:** My chart should have a `g` element x-axis with a corresponding `id="x-axis"`.
|
||||
**需求 #2：** 图表应该包含一个 `g` 元素作为 x 轴，并相应地具有 `id="x-axis"` 属性。
|
||||
|
||||
**User Story #3:** My chart should have a `g` element y-axis with a corresponding `id="y-axis"`.
|
||||
**需求 #3：** 图表应该包含一个 `g` 元素作为 y 轴，并相应地具有`id="y-axis"` 属性。
|
||||
|
||||
**User Story #4:** Both axes should contain multiple tick labels, each with the corresponding `class="tick"`.
|
||||
**需求 #4：** 两个轴都应包含多个刻度标签，每个标签具有 `class="tick"` 属性
|
||||
|
||||
**User Story #5:** My chart should have a `rect` element for each data point with a corresponding `class="bar"` displaying the data.
|
||||
**需求 #5：** 在图表里，每个数据点都应该有一个具有 `class="bar"` 属性的 `rect` 元素来展示数据。
|
||||
|
||||
**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing date and GDP values.
|
||||
**需求 #6：** 每个数据条应该具有包含日期的 `data-date` 属性以及包含 GDP 值的 `data-gdp` 属性。
|
||||
|
||||
**User Story #7:** The bar elements' `data-date` properties should match the order of the provided data.
|
||||
**需求 #7：** 数据条元素的 `data-date` 属性应与提供的数据的顺序相匹配。
|
||||
|
||||
**User Story #8:** The bar elements' `data-gdp` properties should match the order of the provided data.
|
||||
**需求 #8：** 数据条元素的 `data-gdp` 属性应与提供的数据的顺序相匹配。
|
||||
|
||||
**User Story #9:** Each bar element's height should accurately represent the data's corresponding GDP.
|
||||
**需求 #9：** 每个数据条元素的高度应准确地表示其数据所对应的 GDP 值。
|
||||
|
||||
**User Story #10:** The `data-date` attribute and its corresponding bar element should align with the corresponding value on the x-axis.
|
||||
**需求 #10：** `data-date` 属性和它对应的数据条元素应与 x 轴上的相应的值对齐。
|
||||
|
||||
**User Story #11:** The `data-gdp` attribute and its corresponding bar element should align with the corresponding value on the y-axis.
|
||||
**需求 #11：** `data-gdp` 属性和它对应的数据条元素应与 y 轴上的相应的值对齐。
|
||||
|
||||
**User Story #12:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #12：** 我可以将鼠标悬停在某个区域上，并查看具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #13:** My tooltip should have a `data-date` property that corresponds to the `data-date` of the active area.
|
||||
**需求 #13：** 提示框应该有 `data-date` 属性，它对应了当前激活区域的 `data-date` 属性。
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
以下是完成此项目所需的数据： `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize Data with a Choropleth Map
|
||||
title: 用等值区域图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
dashedName: visualize-data-with-a-choropleth-map
|
||||
@ -8,42 +8,42 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/EZKqza> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**User Story #1:** My choropleth should have a title with a corresponding `id="title"`.
|
||||
**需求 #1：** 等值区域图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
**User Story #2:** My choropleth should have a description element with a corresponding `id="description"`.
|
||||
**需求 #2：** 等值区域图包含一个具有 `id="description"` 属性的描述内容。
|
||||
|
||||
**User Story #3:** My choropleth should have counties with a corresponding `class="county"` that represent the data.
|
||||
**需求 #3：** 等值区域图包含一些州县来展示数据，这些州县应该具有 `class="county"` 属性。
|
||||
|
||||
**User Story #4:** There should be at least 4 different fill colors used for the counties.
|
||||
**需求 #4：** 这些州县至少应该有 4 种不同的填充颜色。
|
||||
|
||||
**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding fips and education values.
|
||||
**需求 #5：** 每个州县都应该具有 `data-fips` 和 `data-education` 属性，分别包含他们相应的 fips 值和教育值。
|
||||
|
||||
**User Story #6:** My choropleth should have a county for each provided data point.
|
||||
**需求 #6：** 在等值区域图中，每一个提供的数据点都应该有一个对应的州县。
|
||||
|
||||
**User Story #7:** The counties should have data-fips and data-education values that match the sample data.
|
||||
**需求 #7：** 各个州县应该具有与样本数据匹配的 fips 值和教育值。
|
||||
|
||||
**User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`.
|
||||
**需求 #8：** 等值区域图包含一个具有 `id="legend"` 属性的图例。
|
||||
|
||||
**User Story #9:** There should be at least 4 different fill colors used for the legend.
|
||||
**需求 #9：** 图例至少应该使用 4 种不同的填充颜色。
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #10：** 将鼠标悬停在某个区域上时，可以看到具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-education` property that corresponds to the `data-education` of the active area.
|
||||
**需求 #11：** 提示框应该有 `data-education` 属性，它对应了当前激活区域的 `data-education` 属性。
|
||||
|
||||
Here are the datasets you will need to complete this project:
|
||||
以下是完成此项目所需的数据集：
|
||||
|
||||
- **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
- **US Education Data:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Heat Map
|
||||
title: 用热图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301466
|
||||
dashedName: visualize-data-with-a-heat-map
|
||||
@ -8,51 +8,51 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/JEXgeY> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**User Story #1:** My heat map should have a title with a corresponding `id="title"`.
|
||||
**需求 #1：** 热度图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
**User Story #2:** My heat map should have a description with a corresponding `id="description"`.
|
||||
**需求 #2：** 热度图包含一个具有 `id="description"` 属性的描述内容。
|
||||
|
||||
**User Story #3:** My heat map should have an x-axis with a corresponding `id="x-axis"`.
|
||||
**需求 #3：** 热度图包含一个具有 `id="x-axis"` 属性的 x 轴。
|
||||
|
||||
**User Story #4:** My heat map should have a y-axis with a corresponding `id="y-axis"`.
|
||||
**需求 #4：** 热度图包含一个具有 `id="y-axis"` 属性的 y 轴。
|
||||
|
||||
**User Story #5:** My heat map should have `rect` elements with a `class="cell"` that represent the data.
|
||||
**需求 #5：** 热度图包含一些 `rect` 元素来展示数据，他们具有 `class="cell"` 属性。
|
||||
|
||||
**User Story #6:** There should be at least 4 different fill colors used for the cells.
|
||||
**需求 #6：** 这些单元格元素至少应该有 4 种不同的填充颜色。
|
||||
|
||||
**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding month, year, and temperature values.
|
||||
**需求 #7：** 每个单元格元素都有这些属性 `data-month`，`data-year`，`data-temp`，包含了它们相应的月份、年份和温度值。
|
||||
|
||||
**User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.
|
||||
**需求 #8：** 每个元素的 `data-month`、`data-year` 属性应该在数据范围内。
|
||||
|
||||
**User Story #9:** My heat map should have cells that align with the corresponding month on the y-axis.
|
||||
**需求 #9：** 热度图包含与 y 轴上的相应月份对齐的单元格。
|
||||
|
||||
**User Story #10:** My heat map should have cells that align with the corresponding year on the x-axis.
|
||||
**需求 #10：** 热度图包含与 x 轴上相应年份对齐的单元格。
|
||||
|
||||
**User Story #11:** My heat map should have multiple tick labels on the y-axis with the full month name.
|
||||
**需求 #11：** 热度图在 y 轴上有多个刻度标签，并带有完整的月份名称。
|
||||
|
||||
**User Story #12:** My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.
|
||||
**需求 #12：** 热度图在 x 轴上有多个刻度标签，年份在 1754 到 2015 之间。
|
||||
|
||||
**User Story #13:** My heat map should have a legend with a corresponding `id="legend"`.
|
||||
**需求 #13：** 热度图包含一个具有 `id="legend"` 属性的图例。
|
||||
|
||||
**User Story #14:** My legend should contain `rect` elements.
|
||||
**需求 #14：** 图例包含一些 `rect` 元素。
|
||||
|
||||
**User Story #15:** The `rect` elements in the legend should use at least 4 different fill colors.
|
||||
**需求 #15：** 图例中的这些 `rect` 元素应该至少使用 4 种不同的填充颜色。
|
||||
|
||||
**User Story #16:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #16：** 将鼠标悬停在某个区域上时，可以看到具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #17:** My tooltip should have a `data-year` property that corresponds to the `data-year` of the active area.
|
||||
**需求 #17：** 提示框应该有 `data-year` 属性，它对应了当前激活区域的 `data-year` 属性。
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
以下是完成此项目所需的数据：`https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
title: 用散点图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
@ -8,47 +8,47 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/bgpXyK> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），因为内容是动态渲染的，试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 框架目前还不支持它们。
|
||||
|
||||
**User Story #1:** I can see a title element that has a corresponding `id="title"`.
|
||||
**需求 #1：** 散点图包含一个具有 `id="title"` 属性的标题元素。
|
||||
|
||||
**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
|
||||
**需求 #2：** 散点图包含一个具有 `id="x-axis"` 属性的 x 轴。
|
||||
|
||||
**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
|
||||
**需求 #3：** 散点图包含一个具有 `id="y-axis"` 属性的 y 轴。
|
||||
|
||||
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
|
||||
**需求 #4：** 散点图包含一些点，每个点都有一个值为 `dot` 的 class 属性，它代表了被绘制的数据。
|
||||
|
||||
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding x and y values.
|
||||
**需求 #5：** 每个点都应具有 `data-xvalue` 属性和 `data-yvalue` 属性，对应这个点的 x 和 y 值。
|
||||
|
||||
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or Date objects are acceptable for test evaluation. For `data-yvalue` (minutes), use Date objects.
|
||||
**需求 #6：** 每个点的 `data-xvalue` 属性和 `data-yvalue` 属性应该在实际数据的范围内，并且数据格式应该正确无误。 对于 `data-xvalue` 属性，可以接受整数（全年）或 Date 对象进行测试评估。 对于 `data-yvalue` 属性（分钟），请使用 Date 对象。
|
||||
|
||||
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
|
||||
**需求 #7：** `data-xvalue` 属性和它对应的点应该和 x 轴上的点或值对齐。
|
||||
|
||||
**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
|
||||
**需求 #8：** `data-yvalue`属性和它对应的点应该和 y 轴上的点或值对齐。
|
||||
|
||||
**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
|
||||
**需求 #9：** 散点图的 y 轴上有多个时间格式为 `%M:%S` 的刻度标签。
|
||||
|
||||
**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
|
||||
**需求 #10：** 散点图的 x 轴上有多个显示年份的刻度标签。
|
||||
|
||||
**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
|
||||
**需求 #11：** 散点图的 x 轴标签的范围在实际 x 轴数据的范围内。
|
||||
|
||||
**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
|
||||
**需求 #12：** 散点图的 y 轴标签的范围在实际 y 轴数据的范围内。
|
||||
|
||||
**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
|
||||
**需求 #13：** 散点图包含一个包含描述性文字的图例，它具有 `id="legend"` 属性。
|
||||
|
||||
**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #14：** 将鼠标悬停在某个区域上时，可以看到具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
|
||||
**需求 #15：** 提示框应该有 `data-year` 属性，它对应了当前激活区域的 `data-xvalue` 属性。
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
以下是完成此项目所需的数据：`https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且通过所有测试，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize Data with a Treemap Diagram
|
||||
title: 用树形图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/KaNGNR> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
|
||||
**需求 #1：** 矩阵树图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
|
||||
**需求 #2：** 矩阵树图包含一个具有 `id="description"` 属性的描述内容。
|
||||
|
||||
**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
|
||||
**需求 #3：** 矩阵树图包含一些具有 `class="tile"` 属性的 `rect` 元素来展示数据。
|
||||
|
||||
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
|
||||
**需求 #4：** 这些矩形块元素至少应该有 2 种不同的填充颜色。
|
||||
|
||||
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding name, category, and value.
|
||||
**需求 #5：** 每一块矩形元素应该具有 `data-name`、`data-category`、以及`data-value` 这些属性，包含了它们相应的名称，分类，以及数值。
|
||||
|
||||
**User Story #6:** The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area.
|
||||
**需求 #6：** 每个矩形块的面积和它的 data-value 属性值相对应：data-value 值越大的矩形块面积越大。
|
||||
|
||||
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
|
||||
**需求 #7：** 矩阵树图包含一个具有 `id="legend"` 属性的图例。
|
||||
|
||||
**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
|
||||
**需求 #8：** 图例包含一些具有 `class="legend-item"` 属性的 `rect` 元素。
|
||||
|
||||
**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
|
||||
**需求 #9：** 图例中的这些 `rect` 元素至少应该使用 2 种不同的填充颜色。
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #10：** 将鼠标悬停在某个区域上时，可以看到具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
|
||||
**需求 #11：** 提示框应该有 `data-value` 属性，它对应了当前激活区域的 `data-value` 属性。
|
||||
|
||||
For this project you can use any of the following datasets:
|
||||
对于此项目，您可以使用以下任何数据集：
|
||||
|
||||
- **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
- **Kickstarter Pledges：** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales：** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales：** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user