2.7 KiB
| title | localeTitle |
|---|---|
| Set Up D3 | 设置D3 |
HTML设置
现在，您只需使用文本文件和Web浏览器。您将从HTML的静态页面开始。然后你将添加d3.js. 创建名为d3js projects_的文件夹。在名为project_ 1.html 的文件夹中创建一个HTML文件 。
从基本的HTML网页开始：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello!</p>
</body>
</html>
它显示在浏览器中：
D3.js设置
要获取主要的D3.js JavaScript文件，请转到D3.js网站。在页面上的第一段后，您将看到一个包含最新版本链接的部分。下载最新版本d3.v2.min.js.将此文件保存在d3js_projects文件夹中。
文件d3.v2.min.js与HTML文件保存在同一文件夹中，因此可以轻松引用它。我们从HTML文件的头部引用JavaScript文件。我们更新的HTML文件现在如下所示：
html <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.v2.min.js"></script> </head> <body> <p>Hello!</p> </body> </html>
源文件设置测试
为了测试我们的D3.js设置，我们打开了inspect元素工具包。在Webkit Inspector的Element选项卡中，我们打开所有元素，以便我们可以看到整个HTML结构。然后我们将鼠标悬停在d3.vs.min.js src上。
当我们点击链接时，它会将我们带到“源”选项卡。这将显示D3.js缩小的代码。
### JavaScript控制台设置测试
最后一次测试将在JavaScript控制台中进行。此测试告诉我们D3.js是否正确加载以供我们在JavaScript控制台中使用。 在此快照中，找到Webkit检查器中的“控制台”选项卡：
当您单击选项卡时，它将显示一个空白屏幕，您可以在其中键入和评估JavaScript。
在JavaScript控制台中，键入以下内容：
javascript alert("hello");
这将导致弹出警报弹出并说“你好！”。这就是它的样子：
现在测试D3.js是否正确加载。在控制台中键入小写“d3”，后跟句点：
javascript d3
如果我们正确安装了D3.js，则应显示以下内容：
如果所有测试都通过并且您能够正确加载D3.js，那么您就可以开始了。
＃＃＃＃ 更多信息