freeCodeCamp

4.3 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7168d8c242eddfaeb5bd13	Visualize Data with a Bar Chart	true	3		使用条形图可视化数据

Description

目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/GrZVaM 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS和基于D3 svg的可视化库。测试需要使用D3轴属性生成轴，该属性会自动生成沿轴的刻度。通过D3测试需要这些刻度，因为它们的位置用于确定绘制元素的对齐方式。有关生成轴的信息，请访问https://github.com/d3/d3/blob/master/API.md#axes-d3-axis 。在每次测试时查询必需（非虚拟）DOM元素。如果您使用前端框架（例如Vue），则测试结果可能对动态内容不准确。我们希望最终能够容纳它们，但D3项目目前不支持这些框架。 用户故事＃1：我的图表应该有一个标题，对应的id="title" 。 用户故事＃2：我的图表应该有一个g元素x轴，对应的id="x-axis" 。 用户故事＃3：我的图表应该有一个g元素y轴，对应的id="y-axis" 。 用户故事＃4：两个轴应包含多个刻度标签，每个刻度标签对应的class="tick" 。 用户故事＃5：我的图表应该为每个数据点都有一个rect元素，相应的class="bar"显示数据。 用户故事＃6：每个栏应具有包含日期和GDP值的属性data-date和data-gdp 。 用户故事＃7：条形元素的data-date属性应与提供的数据的顺序相匹配。 用户故事＃8：条形元素的data-gdp属性应与提供的数据的顺序相匹配。 用户故事＃9：每个条形元素的高度应准确地表示数据的相应GDP。 用户故事＃10： data-date属性及其对应的bar元素应与x轴上的对应值对齐。 用户故事＃11： data-gdp属性及其对应的bar元素应与y轴上的对应值对齐。 用户故事＃12：我可以将鼠标悬停在一个区域上，并查看带有相应id="tooltip" ，其中显示有关该区域的更多信息。 用户故事＃13：我的工具提示应该有一个data-date属性，该属性对应于活动区域的data-date 。以下是完成此项目所需的数据集： https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json ： //raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js 。完成后，将URL提交到工作项目，并传递所有测试。如果卡住，请记住使用Read-Search-Ask方法。

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

4.3 KiB Raw Blame History Unescape Escape