---
id: 587d7fa6367417b2b2512bc0
title: Visualize Data with a Treemap Diagram
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: 使用树形图可视化数据
---
## 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.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
您可以通过分叉此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
## Challenge Seed
## Solution
```js
// solution required
```