- DC.js 教程
- DC.js - 首页
- DC.js - 简介
- DC.js - 安装
- DC.js - 概念
- Crossfilter 简介
- D3.js 简介
- DC.js - Mixins
- DC.js - baseMixin
- DC.js - capMixin
- DC.js - colorMixin
- DC.js - marginMixin
- DC.js - coordinateGridMixin
- DC.js - 饼图
- DC.js - 折线图
- DC.js - 柱状图
- DC.js - 组合图
- DC.js - 系列图
- DC.js - 散点图
- DC.js - 气泡图
- DC.js - 热力图
- DC.js - 数据计数
- DC.js - 数据表
- DC.js - 数据网格
- DC.js - 图例
- DC.js - 仪表板工作示例
- DC.js 有用资源
- DC.js - 快速指南
- DC.js - 有用资源
- DC.js - 讨论
DC.js - 安装
本章我们将学习如何设置 DC.js 开发环境。在开始之前,我们需要以下组件:
- DC.js 库
- 编辑器
- 网络浏览器
- Web 服务器
让我们一步一步详细地学习。
DC.js 安装
DC 的安装非常容易设置。按照以下步骤在您的机器上安装 *DC*。
下载 DC 库
DC 是一个开源库;使用链接 https://github.com/dc-js/dc.js/releases 下载文件。
下载最新版本的 DC 文件。(截至目前,最新版本是 2.0.2。)下载完成后,解压 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> // write your dc code here.. </script> </body> </html>
DC 是 JavaScript 代码,因此我们必须在“script”标签内编写所有 DC 代码。我们可能需要操作现有的 DOM 元素,因此建议在“body”标签结束之前编写 DC 代码。
DC.js 编辑器
我们将需要一个编辑器来开始编写代码。有一些优秀的 IDE(集成开发环境)支持 JavaScript,例如:
- Visual Studio Code
- WebStorm
- Eclipse
- Sublime Text
这些 IDE 提供智能代码补全,并支持一些现代 JavaScript 框架。如果我们没有任何高级 IDE,我们始终可以使用基本的编辑器,例如记事本、VI 等。
网络浏览器
DC.js 适用于除 IE8 及更低版本以外的所有浏览器。
Web 服务器
大多数浏览器直接从本地文件系统提供本地 HTML 文件。但是,在加载外部数据文件时,存在某些限制。在本教程的后续章节中,我们将从外部文件(例如 CSV 和 JSON)加载数据。因此,如果我们从一开始就设置 Web 服务器,将会更容易。
我们可以使用任何我们熟悉的 Web 服务器。例如 – IIS、Apache 等。
查看页面
在大多数情况下,我们只需在 Web 浏览器中打开 HTML 文件即可查看它。但是,在加载外部数据源时,运行本地 Web 服务器并从服务器(**https://127.0.0.1:8080**)查看页面更可靠。