freeCodeCamp

4.6 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d7fa6367417b2b2512bc0	Visualize Data with a Treemap Diagram	true	3		使用树形图可视化数据

Description

目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/KaNGNR 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用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：我的树图应该有一个对应id="description" 。 用户故事＃3：我的树形图应该有一个rect元素，并且对应的class="tile"代表数据。 用户故事＃4：瓷砖应至少有2种不同的填充颜色。 用户故事＃5：每个瓷砖应具有属性data-name ， data-category ，和data-value包含其相应的名称，类别，和值。 用户故事＃6：每个图块的区域应对应于数据值量：具有较大数据值的图块应具有更大的区域。 用户故事＃7：我的树形图应该有一个对应id="legend" 。 用户故事＃8：我的图例应该有一个带有相应class="legend-item" rect元素。 用户故事＃9：图例中的rect元素应使用至少2种不同的填充颜色。 用户故事＃10：我可以将鼠标悬停在某个区域上，并查看带有相应id="tooltip" ，其中显示有关该区域的更多信息。 用户故事＃11：我的工具提示应具有与活动区域的data-value对应的data-value data-value属性。对于此项目，您可以使用以下任何数据集：

Kickstarter承诺： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json ： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json
电影销售： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json ： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json
视频游戏销售： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json ： https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-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.6 KiB Raw Blame History Unescape Escape