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--
|
||||
|
||||
|
||||
@ -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