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,那么您就可以开始了。
#### 更多信息