教程 > DC.js 中文教程 > DC.js 基础 阅读：101

DC.js 安装

在本章中，我们将学习如何设置 DC.js 开发环境。 在开始之前，我们需要以下组件

  • DC.js 库
  • DC.js 编辑器
  • Web 浏览器
  • Web 服务器

让我们一一详细介绍这些步骤。

DC.js 安装

DC 安装非常容易设置。 按照以下步骤在我们的机器上安装 DC。

下载 DC.js 库

DC 是一个开源库； 使用链接 https://github.com/dc-js/dc.js/releases 下载文件。

下载最新版本的 DC 文件。 （截至目前，最新版本为 4.0.0）。 下载完成后，解压缩 DC 文件夹并将其粘贴到项目的根文件夹或任何其他文件夹中，我们要在其中保留所有库文件。

示例 HTML 页面如下所示。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <script>
         // 这里写我们自己的代码
      </script>
   </body>
</html>

DC 是 JavaScript 代码，所以我们必须在“script”标签中编写所有 DC 代码。 我们可能需要操作现有的 DOM 元素，因此建议在“body”标签结束之前编写 DC 代码。

DC.js 编辑器

我们需要一个编辑器来开始编写代码。 有一些很棒的 IDE（集成开发环境）支持 JavaScript，例如

  • Visual Studio Code
  • WebStorm
  • Eclipse
  • SublimeText

这些 IDE 提供智能代码完成并支持一些现代 JavaScript 框架。 如果我们没有任何花哨的 IDE，我们总是可以使用基本的编辑器，例如记事本、VI 等。

Web 浏览器

DC.js 适用于除 IE8 及更低版本之外的所有浏览器。

Web 服务器

大多数浏览器直接从本地文件系统提供本地 HTML 文件。 但是，在加载外部数据文件时存在一定的限制。 在本教程的后续章节中，我们将从 CSV 和 JSON 等外部文件加载数据。 因此，如果我们从一开始就设置 Web 服务器，对我们来说会更容易。

我们可以使用任何我们熟悉的 Web 服务器。 例如 – Nginx 、Apache 等。

查看页面

在大多数情况下，我们只需在 Web 浏览器中打开 HTML 文件即可查看。 但是，在加载外部数据源时，运行本地网络服务器并从服务器http://localhost:8080 查看页面更可靠。

查看笔记

扫码一下
查看教程更方便