DC.js - 概念

對於大多數前端開發人員來說，DC.js 簡單易用。它使構建基本圖表變得快速，即使沒有任何 D3.js 知識。在我們開始使用 DC.js 建立視覺化之前；我們需要熟悉 Web 標準。以下 Web 標準在 D3.js 中被大量使用，而 D3.js 是 DC.js 渲染圖表的基石。

超文字標記語言 (HTML)
文件物件模型 (DOM)
層疊樣式表 (CSS)

讓我們詳細瞭解每個 Web 標準。

超文字標記語言 (HTML)

眾所周知，HTML 用於構建網頁內容的結構。它儲存在一個副檔名為“.html”的文字檔案中。

一個典型的基本 HTML 示例如下所示：

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   
   <body>

   </body>
</html>

文件物件模型 (DOM)

當瀏覽器載入 HTML 頁面時，它會被轉換為分層結構。HTML 中的每個標籤都會轉換為 DOM 中具有父子層次結構的元素/物件。這使得我們的 HTML 具有更合理的結構。一旦 DOM 形成，操作（新增/修改/刪除）頁面上的元素就變得更容易了。

讓我們使用以下 HTML 文件來了解 DOM：

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

上述 HTML 文件的文件物件模型如下：

層疊樣式表 (CSS)

雖然 HTML 為網頁提供了結構，但 CSS 樣式使網頁看起來更美觀。CSS 是一種樣式表語言，用於描述用 HTML 或 XML（包括 SVG 或 XHTML 等 XML 方言）編寫的文件的呈現方式。CSS 描述了元素應該如何在網頁上呈現。

JavaScript

JavaScript 是一種鬆散型別的客戶端指令碼語言，在使用者的瀏覽器中執行。JavaScript 與 html 元素（DOM 元素）互動，以使 Web 使用者介面具有互動性。JavaScript 實現了 ECMAScript 標準，其中包括基於 ECMA-262 規範的核心功能以及其他不基於 ECMAScript 標準的功能。JavaScript 知識是 DC.js 的先決條件。

元件

DC.js 基於兩個優秀的 JavaScript 庫，它們是：

Crossfilter
D3.js

Crossfilter

Crossfilter 是一個用於在瀏覽器中探索大型多元資料集的 JavaScript 庫。它用於非常快速地對數十萬或數百行原始資料進行分組、過濾和聚合。

D3.js

D3.js 代表資料驅動的文件。D3.js 是一個用於基於資料操作文件的 JavaScript 庫。D3 是動態、互動式、線上資料視覺化框架，並在大量網站中使用。D3.js 由 **Mike Bostock** 編寫，作為早期視覺化工具包 **Protovis** 的繼任者建立。D3.js 在數十萬個網站上使用。

列印頁面