4.7 KiB
4.7 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7fa6367417b2b2512bc0 | Visualize Data with a Treemap Diagram | true | 3 | 使用树形图可视化数据 |
Description
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.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
:https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json
- 电影销售:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
:https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json
- 视频游戏销售:
https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
:https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json
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