2.4 KiB
2.4 KiB
| title | localeTitle |
|---|---|
| Us State Map Visualization Using D3js | 我们使用D3js的状态图可视化 |
项目说明：
我们有美国各州的样本数据：美国各州报告的严重事故数量。
_我们将这些数据分为三类：_一个月报告的最低数量，一年中平均报告的事故数和一个月内报告的最高数，如下面的样本数据所示。
我们想要绘制一个美国地图并可视化这些数据，这样当我们将鼠标悬停在一个状态上时，它应该显示该特定状态的数据。
样本数据：
AZ: 13 41 57
CA: 41 60 81
NY: 6 35 54等等。
提示和资源：
分步说明：
-
首先，我们需要创建一张美国地图。
-
从freehtml5maps获取已创建的地图或使用此Javascript
-
将地图添加到用于可视化的主要JavaScript中
例如， (script src="uStates.js")(/script) (!-- creates uStates. --)
- 创建Div标签以保存工具提示并创建SVG以保存地图。
例如，
javascript (div id="tooltip")(/div) (svg width="960" height="600" id="statesvg")(/svg)
- 创建工具提示功能以在工具提示div中创建html内容字符串。
这个工具提示函数将返回一个表，只要我们将鼠标悬停在状态上，就会显示该表。表格应该是这样的（如第一张图所示）：Arizona Low 13 Average 41 High 57
- 使用数据和工具提示函数在id上绘制状态（在我们的示例中为#statesvg）。
例如， uStates.draw("#statesvg", sampleData, tooltipFunc);
最终输出将是这样的:(鼠标悬停在加利福尼亚州）
参考文献：
- D3.js示例和文档。
- NPashaP GitHub
- 庄严
- FreeHTML5Maps