- 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 是一個優秀的 JavaScript 庫，用於在瀏覽器、移動裝置中進行資料分析，並最終幫助建立資料視覺化。資料視覺化是以圖片或圖形格式呈現資料。資料視覺化的主要目標是透過統計圖形、圖表和資訊圖形清晰有效地傳達資訊。可以使用不同的 JavaScript 框架在常規 Web 甚至移動應用程式中開發和整合資料視覺化。
什麼是 DC.js？
DC.js 是一個用於探索大型多維資料集的圖表庫。它依賴於 D3.js 引擎以 CSS 友好的 SVG 格式渲染圖表。它允許渲染複雜的資料視覺化，並具有包含條形圖、散點圖、熱力圖等的儀表板設計。DC.js 構建為與 **Crossfilter** 協同工作以進行資料操作。DC.js 使單個（大型）資料集能夠使用許多相互關聯的圖表進行視覺化，並具有高階自動過濾選項。
為什麼我們需要 DC.js？
通常，資料視覺化是一個非常複雜的過程，並且在客戶端執行它需要額外的技能。DC.js 使我們能夠使用更簡單的程式設計模型建立幾乎任何型別的複雜資料視覺化。它是一個開源的、非常容易上手的 JavaScript 庫，它允許我們在很短的時間內實現簡潔的自定義視覺化。
DC.js 圖表是資料驅動的並且非常反應靈敏。此外，它使用 **Crossfilter 庫** 向用戶互動提供即時反饋。
DC.js 功能
DC.js 是最好的資料視覺化框架之一，它可以用來生成簡單和複雜的視覺化。下面列出了一些主要功能：
- 非常靈活。
- 易於使用。
- 快速渲染圖表。
- 支援大型多維資料集。
- 開源 JavaScript 庫。
Dc.js 優勢
DC.js 是一個開源專案，與其他專案相比，它需要的程式碼更少。它具有以下優點：
- 出色的資料視覺化。
- 執行圖形過濾。
- 快速建立圖表和儀表板。
- 建立高度互動式的儀表板。
在下一章中，我們將瞭解如何在我們的系統上安裝 D3.js。
DC.js - 安裝
在本章中，我們將學習如何設定 DC.js 開發環境。在開始之前，我們需要以下元件：
- DC.js 庫
- 編輯器
- Web 瀏覽器
- 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
- SublimeText
這些 IDE 提供智慧程式碼補全，並支援一些現代 JavaScript 框架。如果我們沒有花哨的 IDE，我們始終可以使用基本的編輯器，如記事本、VI 等。
Web 瀏覽器
DC.js 在除 IE8 及更低版本之外的所有瀏覽器上都能正常工作。
Web 伺服器
大多數瀏覽器直接從本地檔案系統提供本地 HTML 檔案。但是，在載入外部資料檔案時存在某些限制。在本教程的後續章節中，我們將從外部檔案（如 CSV 和 JSON）載入資料。因此，如果我們從一開始就設定 Web 伺服器，這對我們來說會更容易。
我們可以使用任何我們熟悉的 Web 伺服器。例如 - IIS、Apache 等。
檢視頁面
在大多數情況下，我們只需在 Web 瀏覽器中開啟 HTML 檔案即可檢視它。但是，在載入外部資料來源時，執行本地 Web 伺服器並從伺服器（**https://:8080**）檢視頁面更可靠。
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（包括 XML 方言，如 SVG 或 XHTML）編寫的文件的呈現方式。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 用於數十萬個網站。
DC.js - Crossfilter 簡介
Crossfilter 是一個多維資料集。它支援與包含一百萬或更多記錄的資料集進行極快的互動。
基本概念
Crossfilter 在 crossfilter 名稱空間下定義。它使用語義版本控制。考慮一個使用下面定義的水果集合載入的 crossfilter 物件：
var fruits = crossfilter ([
{ name: “Apple”, type: “fruit”, count: 20 },
{ name: “Orange”, type: "fruit”, count: 10 },
{ name: “Grapes”, type: “fruit”, count: 50 },
{ name: “Mango”, type: “fruit”, count: 40 }
]);
如果我們需要執行組中的總記錄數，我們可以使用以下函式：
var count = fruits.groupAll().reduceCount().value();
如果我們想按特定型別過濾：
var filtering = fruits.dimension(function(d) { return d.type; });
filtering.filter(“Grapes”)
類似地，我們可以使用 Crossfilter 執行分組。為此，我們可以使用以下函式：
var grouping = filtering.group().reduceCount(); var first = grouping.top(2);
因此，Crossfilter 構建得非常快。如果要重新計算應用過濾器時的組，則會增量計算。Crossfilter 維度非常昂貴。
Crossfilter API
讓我們詳細瞭解值得注意的 Crossfilter API。
**crossfilter([records])** - 用於構造一個新的 crossfilter。如果指定了記錄，則它會同時新增指定的記錄。記錄可以是任何 JavaScript 物件或原語的陣列。
**crossfilter.add(records)** - 將指定的記錄新增到 crossfilter。
**crossfilter.remove()** - 從 crossfilter 中刪除與當前過濾器匹配的所有記錄。
**crossfilter.size()** - 返回 crossfilter 中的記錄數。
**crossfilter.groupAll()** - 這是一個用於對所有記錄進行分組並減少為單個值的函式。
**crossfilter.dimension(value)** - 用於使用指定的 value accessor 函式構造一個新的維度。
**dimension.filter(value)** - 用於過濾維度匹配值的記錄，並返回維度。
**dimension.filterRange(range)** - 過濾維度值大於或等於 range[0] 且小於 range[1] 的記錄。
**dimension.filterAll()** - 清除此維度上的任何過濾器。
**dimension.top(k)** - 用於返回一個新陣列，其中包含根據此維度的自然順序排列的前 k 條記錄。
**dimension.bottom(k)** - 用於返回一個新陣列，其中包含根據此維度的自然順序排列的後 k 條記錄。
dimension.dispose() − 用於從交叉過濾器中移除維度。
在下一章中，我們將簡單瞭解一下 D3.js。
DC.js - D3.js 簡介
D3.js 是一個 JavaScript 庫，用於在瀏覽器中建立互動式視覺化。D3 庫允許我們在資料集的上下文中操作網頁元素。這些元素可以是 HTML、SVG 或 Canvas 元素，並且可以根據資料集的內容進行新增、刪除或編輯。它是一個用於操作 DOM 物件的庫。D3.js 可以成為資料探索的有價值的輔助工具。它使您可以控制資料的表示方式，並允許您新增資料互動性。
與其他庫相比，D3.js 是首屈一指的框架之一。這是因為它; 它在網路和資料視覺化方面工作，並且是企業級的。另一個原因是它具有極大的靈活性，使世界各地的開發人員能夠建立許多高階圖表。此外，它還極大地擴充套件了其功能。
讓我們瞭解 D3.js 的基本概念，如下所示 -
- 選擇
- 資料連線
- SVG
- 過渡
- 動畫
- D3.js API
讓我們詳細瞭解每個概念。
選擇
選擇是 D3.js 中的核心概念之一。它基於 CSS 選擇器概念。那些已經使用過並瞭解 JQuery 的人可以很容易地理解選擇。它使我們能夠根據 CSS 選擇器選擇 DOM，然後提供修改或追加和刪除 DOM 元素的選項。
資料連線
資料連線是 D3.js 中的另一個重要概念。它與選擇一起工作，使我們能夠根據資料集（一系列數值）操作 HTML 文件。預設情況下，D3.js 在其方法中優先考慮資料集，並且資料集中每個專案都對應一個 HTML 元素。
SVG
SVG 代表可縮放向量圖形。SVG 是一種基於 XML 的向量圖形格式。它提供繪製不同形狀的選項，例如線條、矩形、圓形、橢圓形等。因此，使用 SVG 設計視覺化效果可以為您提供更多功能和靈活性。
變換
SVG 提供了轉換單個 SVG 形狀元素或 SVG 元素組的選項。SVG 變換支援平移、縮放、旋轉和傾斜。
過渡
過渡是專案從一種狀態變為另一種狀態的過程。D3.js 提供了一個 transition() 方法來在 HTML 頁面中執行過渡。
動畫
D3.js 透過過渡支援動畫。可以使用適當的過渡來完成動畫。過渡是關鍵幀動畫的一種有限形式，只有兩個關鍵幀：開始和結束。起始關鍵幀通常是 DOM 的當前狀態，結束關鍵幀是您指定的屬性、樣式和其他屬性集。過渡非常適合過渡到新檢視，而無需依賴起始檢視的複雜程式碼。
D3.js API
讓我們簡單瞭解一些重要的 D3.js API 方法。
集合 API
集合只是一個將多個元素組合成一個單元的物件。它也稱為容器。它包含物件、對映、集合和巢狀。
路徑 API
路徑用於繪製矩形、圓形、橢圓形、折線、多邊形、直線和曲線。SVG 路徑表示可以進行描邊、填充、用作剪輯路徑或所有三種組合的形狀輪廓。
軸 API
D3.js 提供了繪製軸的功能。軸由線、刻度和標籤組成。軸使用比例尺，因此每個軸都需要指定一個比例尺才能使用。
縮放 API
縮放有助於縮放內容。您可以使用點選和拖動方法關注特定區域。
分隔符分隔值 API
分隔符是一系列一個或多個字元，用於指定純文字或其他資料中獨立區域之間的邊界。欄位分隔符是一系列逗號分隔的值。簡而言之，分隔符分隔的值是逗號分隔值 (CSV) 或製表符分隔值 (TSV)。
DC.js - Mixins
Mixin 是一個抽象函式物件，它有很多預定義函式，可以在 JavaScript 類中混合使用。但是，它們不能單獨使用。例如，DC.js 有一個Mixin 和dc.baseMixin，它們不能按原樣使用，但被所有 DC 圖表類（如折線圖、餅圖等）使用。DC.js 有一組有限的有用 Mixin，可以輕鬆高效地建立圖表。它們如下所示 -
baseMixin − baseMixin 為所有型別的圖表提供通用功能。它集成了交叉過濾器和 d3.js JavaScript 庫，並提供了一組簡單的函式，可以使用有限的 D3.js 知識建立圖表。
capMixin − capMixin 為低於限制（上限）的資料元素提供分組支援。
colorMixin − colorMixin 為圖表提供顏色支援。
marginMixin − marginMixin 為圖表提供邊距支援。
coordinateGridMixin − coordinateGridMixin 為圖表提供座標支援。
stackMixin − stackMixin 使用d3.layout.stack提供堆疊支援。
bubbleMixin − bubbleMixin 為圖表提供氣泡支援。
讓我們在後續章節中詳細瞭解所有這些 mixin。
DC.js - baseMixin
baseMixin 提供建立任何型別圖表所需的必要基本方法。它涵蓋了從設定圖表寬度到高階圖表過濾的範圍。
常規圖表選項
basicMixin 提供了許多圖表方法來獲取/設定圖表的屬性。它們如下所示，
chartID() − 返回圖表的內部數字 ID。
chartGroup( [chartGroup]) − 獲取或設定圖表所屬的組。在 DC.js 中，圖表可以分組到一個集合中。一個組中的所有圖表都應該共享相同的資料交叉過濾器資料集。它們會同時渲染和重新繪製。
mychart.chartGroup('dashboard');
minWidth( [minWidth]) − 設定圖表的最小寬度。
mychart.minWidth(300);
width( [width]) − 獲取或設定圖表的寬度。
mychart.width(600);
minHeight( [minHeight]) − 獲取或設定圖表的最小高度。
mychart.minHeight(300);
height( [height]) − 獲取或設定圖表的寬度。
mychart.height(300);
title( [titleFunction]) − 獲取或設定標題函式。標題是圖表中子元素的 SVG 元素標題（例如，柱狀圖中的單個柱）。圖表中的標題在瀏覽器中顯示為工具提示。
mychart.title(function(data) {
return d.key + ': ' + d.value;
});
label( labelFunction[??]) − 與 title() 方法類似，但它設定標籤而不是標題。
mychart.label(function(data) {
return d.key + ': ' + d.value;
});
options(opts) − 使用 JavaScript 物件設定任何圖表選項。每個鍵都表示圖表中相應的可用方法，並且匹配的方法將使用相關值呼叫。
mychart.options ({
'width' : 300,
'height' : 300
});
在這裡，width() 和 height() 方法將使用指定的值觸發。
legend( [legend]) − 將圖例附加到圖表。圖例可以使用d3.legend()方法建立。
mychart.legend (
dc.legend()
.x(500)
.y(50)
.itemHeight(12)
.gap(4))
anchor( parent[??]) − 將根 SVGElement 設定為現有圖表的根或任何有效的 D3 單個選擇器。可選地，還可以使用第二個引數設定圖表組。
anchorName() − 獲取圖表錨定位置的 DOM ID。
svg( [svgElement]) − 返回圖表的 SVGElement。
resetSvg() − 重置 DOM 中的 SVG 容器。
root( [rootElement]) − 獲取圖表的根容器。
資料選項
basicMixin 提供了設定圖表資料的方法。資料設定為交叉過濾器維度和組。此外，它還提供了一個獲取底層資料集的選項。
dimension( [dimension]) − 設定或獲取圖表的維度。維度可以是任何有效的交叉過濾器維度。
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
group( group[??]) − 設定或獲取圖表的組。組可以是任何有效的交叉過濾器組。可以使用第二個引數命名組，以便稍後在程式碼中使用。
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));
data( [callback]) − 設定資料回撥，並使我們能夠獲取底層圖表的資料集。
// get all groups
mychart.data(function (group) {
return group.all();
});
// get top five groups
mychart.data(function (group) {
return group.top(5);
});
keyAccessor( [keyAccessor]) − 獲取或設定鍵訪問器函式。它用於從底層交叉過濾器組中檢索鍵。鍵用於餅圖中的切片以及折線圖/柱狀圖中的 x 軸。預設鍵訪問器函式如下所示 -
chart.keyAccessor(function(d) { return d.key; });
valueAccessor( [valueAccessor]) − 獲取或設定值訪問器函式。它用於從底層交叉過濾器組中檢索值。值用於餅圖中的切片大小以及折線圖/柱狀圖中的 y 軸位置。預設值訪問器函式如下所示 -
chart.valueAccessor(function(d) { return d.value; });
ordering( [orderFunction]) − 獲取或設定排序函式以對序數維度進行排序。預設情況下，圖表使用crossfilter.quicksort.by對元素進行排序。
_chart.ordering(dc.pluck('key'));
篩選選項
篩選是 DC.js 的亮點之一。我們可以使用 filter() 方法直接在圖表物件上應用一個或多個篩選器，並呼叫圖表的 redrawGroup() 或 dc.redrawAll() 方法來檢視篩選器對圖表的影響。預設情況下，圖表物件使用 filter() 方法獲取一個或多個篩選器，將其應用於底層 Crossfilter() 資料集，從 Crossfilter 獲取篩選後的資料，並使用篩選後的資料重新繪製圖表。DC.js 提供了以下方法來處理圖表中的篩選。
Filter( [filter])
獲取或設定圖表的篩選器。如果提供的篩選器是新的，則它將被新增到圖表的篩選器集合中並應用於底層資料集。如果提供的篩選器已存在於圖表的篩選器集合中，則它將移除篩選器並在底層資料上進行相關的篩選。簡而言之，filter 方法將切換提供的篩選器。
mychart.filter(10);
要移除所有篩選器，請使用null值呼叫 filter 方法。篩選器可以是以下專案之一 -
null − 圖表將移除之前應用的所有篩選器。
單個值 − 圖表將呼叫底層 Crossfilter 的 filter 方法併發送提供的值。
dc.filters.RangedFilter − 它接受兩個值，低值和高值。圖表將篩選除低值和高值之間的所有資料。
dc.filters.TwoDimensionalFilter − 它接受二維值，這些值用於熱圖。
dc.filters.RangedTwoDimensionalFilter − 它類似於 dc.filters.RangedFilter，只是它僅接受散點圖中使用的二維值。
hasFilter( [filter])
檢查提供的篩選器是否在圖表中可用。
replaceFilter( [filter])
用提供的篩選器替換圖表的當前篩選器。
filters()
返回與圖表關聯的所有當前篩選器。
filterAll()
清除與圖表關聯的所有篩選器。
filterHandler( [filterHandler])
獲取或設定篩選器處理程式函式。篩選器處理程式函式由圖表用於使用篩選器篩選底層資料集。圖表有一個預設篩選器處理程式函式，可以使用此方法將其替換為自定義篩選器處理程式函式。預設篩選器處理程式如下所示 -
chart.filterHandler(function (dimension, filters) {
if (filters.length === 0) {
// the empty case (no filtering)
dimension.filter(null);
} else if (filters.length === 1 && !filters[0].isFiltered) {
// single value and not a function-based filter
dimension.filterExact(filters[0]);
} else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
// single range-based filter
dimension.filterRange(filters[0]);
} else {
// an array of values, or an array of filter objects
dimension.filterFunction(function (d) {
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (filter.isFiltered && filter.isFiltered(d)) {
return true;
} else if (filter <= d && filter >= d) {
return true;
}
}
return false;
});
}
return filters;
});
hasFilterHandler( [hasFilterHandler])
獲取或設定 has-篩選器處理程式函式。此函式由圖表用於檢查篩選器是否在圖表的篩選器集合中可用。預設 has-篩選器處理程式如下所示 -
chart.hasFilterHandler(function (filters, filter) {
if (filter === null || typeof(filter) === 'undefined') {
return filters.length > 0;
}
return filters.some(function (f) {
return filter <= f && filter >= f;
});
});
addFilterHandler( [addFilterHandler])
獲取或設定 add-篩選器處理程式函式。此函式由圖表用於將篩選器新增到圖表的篩選器集合中。預設 add-篩選器處理程式如下所示 -
chart.addFilterHandler(function (filters, filter) {
filters.push(filter);
return filters;
});
removeFilterHandler( [removeFilterHandler])
獲取或設定 remove-篩選器處理程式函式。此函式由圖表用於從圖表的篩選器集合中移除篩選器。預設 remove-篩選器如下所示 -
chart.removeFilterHandler(function (filters, filter) {
for (var i = 0; i < filters.length; i++) {
if (filters[i] <= filter && filters[i] >= filter) {
filters.splice(i, 1);
break;
}
}
return filters;
});
resetFilterHandler( [resetFilterHandler])
獲取或設定 reset-篩選器處理程式函式。此函式由圖表用於重置圖表的篩選器集合。預設 reset-篩選器如下所示 -
function (filters) {
return [];
}
filterPrinter( [filterPrinterFunction])
獲取或設定印表機-篩選器函式。此函式由圖表用於列印篩選器資訊。
commitHandler()
獲取或設定提交處理程式。提交處理程式的目的是非同步地將過濾後的資料傳送到伺服器。
事件選項
DC.js 定義了一組有限的事件來執行一些功能，例如過濾、縮放等。DC.js 中定義的事件列表如下：
renderlet - 在重新繪製和渲染過渡後觸發。
pretransition - 在過渡開始之前觸發。
preRender - 在圖表渲染之前觸發。
postRender - 在圖表完成渲染，包括所有 renderlet 的邏輯後觸發。
preRedraw - 在圖表重新繪製之前觸發。
postRedraw - 在圖表完成重新繪製，包括所有 renderlet 的邏輯後觸發。
filtered - 應用、新增或刪除過濾器後觸發。
zoomed - 觸發縮放後觸發。
basicMixin 提供了一個方法 on(event, listener) 來為上面定義的所有事件設定回撥函式。
on(event, listener) - 為特定事件設定回撥或監聽器函式。
onClick(datum) - 它被傳遞給 D3 作為每個圖表的 onClick 處理程式。預設行為是對點選的資料（傳遞給回撥）進行過濾，並重新繪製圖表組。
渲染選項
basicMixin 提供了一系列方法來渲染圖表。它們用於繪製圖表，具體如下：
render() - 渲染圖表。通常，在繪製圖表時會首先使用它。
renderGroup() - 渲染該圖表所屬組中的所有圖表。
renderLabel( [renderLabel]) - 開啟/關閉標籤渲染。
renderTitle( [renderTitle]) - 開啟/關閉標題渲染。
redraw() - 重新繪製整個圖表。
redrawGroup() - 重新繪製該圖表所屬組中的所有圖表。
過渡選項
basicMixin 提供了設定圖表過渡效果的方法，具體如下：
transitionDelay( [delay]) - 設定或獲取此圖表例項的動畫過渡延遲（以毫秒為單位）。
transitionDuration( [duration]) - 設定或獲取此圖表例項的動畫過渡持續時間（以毫秒為單位）。
useViewBoxResizing( [useViewBoxResizing]) - 如果設定，則根據 SVG 視口屬性調整圖表大小。
controlsUseVisibility( [controlsUseVisibility]) - 如果設定，則使用 visibility 屬性而不是 display 屬性來顯示/隱藏圖表重置和過濾器控制元件。
在下一章中，我們將瞭解 capMixin。
DC.js - capMixin
capMixin 能夠將低於某個值的資料元素列表分組為“其他”。它適用於行和餅圖。capMixin 的層次結構如下所示。
capMixin 提供了四種方法來查詢“其他”部分，具體如下：
方法 1：cap( [count]) - 獲取或設定將包含在上限中的元素數量。
方法 2：othersGrouper( [grouperFunction]) - 獲取或設定執行“其他”分組的函式。提供的預設函式如下。
chart.othersGrouper(function (topItems, restItems) {
var restItemsSum = d3.sum(restItems, _chart.valueAccessor()),
restKeys = restItems.map(_chart.keyAccessor());
if (restItemsSum > 0) {
return topItems.concat([{
others: restKeys,
key: _chart.othersLabel(),
value: restItemsSum
}]);
}
return topItems;
});
方法 3：othersLabel( [label]) - 獲取或設定“其他”組的標籤。
方法 4：takeFront( [takeFront]) - 獲取或設定封頂的方向。如果設定，圖表將從排序後的資料元素陣列中獲取前面的項；否則將獲取最後的項。
DC.js - colorMixin
colorMixin 為所有需要使用顏色進行視覺化的圖表提供顏色支援。colorMixin 的層次結構如下所示。
colorMixin 提供了以下方法列表來處理顏色，具體如下：
colorAccessor( [colorAccessor])
獲取或設定顏色訪問器函式。這將為底層 Crossfilter 組中每個資料點的顏色比例對映一個不同的顏色值。預設顏色訪問器如下：
mychart.colorAccessor(function (d, i){return i;})
colorDomain( [domain])
獲取或設定顏色對映函式的當前域，並且必須以陣列的形式提供。
calculateColorDomain()
透過確定使用 colorAccessor() 函式找到的資料元素的最小值和最大值來設定顏色域。
colors( [colorScale])
獲取或設定顏色比例。它接受 d3.scale。
chart.colors(d3.scale.category20b()); chart.colors(d3.scale.ordinal().range(['red','green','blue']));
linearColors(r)
設定插值線性顏色比例的快捷方法。
chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);
ordinalColors(r)
設定序數顏色比例的快捷方法。
chart.ordinalColors(['red','green','blue']);
DC.js - marginMixin
marginMixin 為行圖表和座標網格圖表提供邊距實用程式函式。marginMixin 的層次結構如下所示。
marginMixin 提供了一種方法來設定基於座標軸的圖表的邊距。
margins( [margins])
獲取或設定圖表的左、右、上和下邊距。圖表的預設邊距如下：
a. Right - 50 a. Left - 30 a. Top - 10 a. Bottom - 30
var rightMargin = chart.margins().right; // 50 by default chart.margins().bottom = 60;
DC.js - coordinateGridMixin
座標和軸也稱為 coordinateGridMixin，旨在支援許多基於座標網格的具體圖表型別，例如條形圖、折線圖等。coordinateGridMixin 的層次結構如下所示。
coordinateGridMixin 支援許多方法來減少建立座標軸的工作量，具體如下：
- brushOn( [brushOn])
- chartBodyG( [body])
- clipPadding( [pad])
- elasticX( [X])
- focus( [range])
- g( [root])
- isOrdinal()
- mouseZoomable( [Zoom])
- rangeChart( [range])
- round(r)
- xAxisMax()
- xAxisMin()
- xUnitCount()
讓我們簡要討論一下這些方法。
brushOn( [brushOn])
它是一個基於刷子的範圍過濾器。您可以將其開啟/關閉。如果啟用刷子，使用者可以在圖表上拖動滑鼠。開啟可能會停用圖表上的其他互動元素，例如突出顯示、工具提示和參考線。定義如下：
chart.brushOn = function (brushOn) {
if (!arguments.length) {
return _brushOn;
}
_brushOn = brushOn;
return chart;
};
chartBodyG( [body])
它用於檢索圖表主體的 SVG 組。您可以按如下所示呼叫此函式：
chart.chartBodyG = function (body) {
if (!arguments.length) {
return _chartBodyG;
}
};
clipPadding( [pad])
它用於獲取或設定剪輯路徑的填充（以畫素為單位）。定義如下：
chart.clipPadding = function (pad) {
if (!arguments.length) {
return _clipPadding;
}
};
elasticX( [X])
此方法用於開啟/關閉彈性 x 軸行為。如果 x 軸彈性開啟，則網格圖表將嘗試重新計算 x 軸範圍。它觸發一個定義如下所示的重繪事件：
chart.elasticX = function (X) {
if (!arguments.length) {
return _x;
}
}
類似地，您可以執行 elasticY( [Y])。
focus( [range])
此方法用於縮放圖表以聚焦於給定範圍。給定範圍應為僅包含兩個元素的陣列（[start, end]）。
g( [root])
此方法用於獲取或設定根 g 元素。
isOrdinal()
此方法用於返回圖表的序數 xUnits。大多數圖表在處理序數資料時行為不同，並使用此方法的結果來觸發相應的邏輯。
mouseZoomable( [Zoom])
此方法用於設定或獲取滑鼠縮放功能。
rangeChart( [range])
它用於獲取或設定與例項關聯的範圍選擇圖表。
round(r)
此方法用於設定或獲取在啟用刷子時用於量化選擇的舍入函式。
xAxisMax()
計算要在圖表中顯示的最大 x 值。類似地，我們可以對 Y 軸執行此操作。
xAxisMin()
計算要在圖表中顯示的最小 x 值。類似地，我們可以對 Y 軸執行此操作。
xUnitCount()
返回 x 軸上顯示的單位數。類似地，我們可以對 Y 軸執行此操作。
DC.js - 餅圖
餅圖是一種圓形統計圖。它被分成幾個扇形來顯示數值比例。本章詳細解釋瞭如何使用 DC.js 繪製餅圖。
餅圖方法
在繼續繪製餅圖之前，我們應該瞭解 dc.pieChart 類及其方法。dc.pieChart 使用 mixin 來獲取繪製圖表的的基本功能。dc.pieChart 使用的 mixin 如下：
- baseMixin
- capMixin
- colorMixin
dc.pieChart 的完整類圖如下所示：
dc.pieChart 獲取上述指定 mixin 的所有方法，以及它自己的一些方法來專門繪製餅圖。它們如下：
- cx( [cx])
- drawPaths( [path])
- emptyTitle( [title])
- externalLabels( [label])
- innerRadius( [innerRadius])
- minAngleForLabel( [minAngleForLabel])
- radius( [radius])
- slicesCap( [cap])
讓我們詳細討論一下這些方法。
cx( [cx])
它用於獲取或設定中心 x 座標位置，定義如下：
chart.cx = function (cx) {
if (!arguments.length) {
return (_cx || _chart.width() / 2);
}
};
類似地，您可以執行 y 座標位置。
drawPaths( [path])
此方法用於繪製餅圖的路徑，定義如下：
chart.drawPaths = function (path) {
if (arguments.length === 0) {
return path;
}
};
emptyTitle( [title])
此方法用於在沒有資料時設定標題。定義如下：
chart.emptyTitle = function (title) {
if (arguments.length === 0) {
return title;
}
};
externalLabels( [label])
它用於將扇形標籤定位在圖表外邊緣的偏移處。定義如下：
chart.externalLabels = function (label) {
if (arguments.length === 0) {
return label;
}
};
innerRadius( [innerRadius])
此方法用於獲取或設定餅圖的內半徑。如果內半徑大於 0px，則餅圖將呈現為甜甜圈圖。定義如下：
_chart.innerRadius = function (innerRadius) {
if (!arguments.length) {
return _innerRadius;
}
};
minAngleForLabel( [minAngleForLabel])
此方法用於獲取或設定標籤渲染的最小扇形角度。定義如下：
_chart.minAngleForLabel = function (minAngleForLabel) {
if (!arguments.length) {
return _minAngleForLabel;
}
_minAngleForLabel = minAngleForLabel;
return _chart;
};
radius( [radius])
此方法用於獲取或設定外半徑。如果未指定半徑，則它將取圖表寬度和高度的最小值的一半。定義如下：
_chart.radius = function (radius) {
if (!arguments.length) {
return _givenRadius;
}
_givenRadius = radius;
return _chart;
};
slicesCap( [cap])
獲取或設定餅圖將生成的扇形最大數量。頂部扇形由從高到低的數值確定。超過上限的其他扇形將彙總到一個“其他”扇形中。
繪製餅圖
讓我們在 DC 中建立一個餅圖。在這個餅圖示例中，讓我們獲取一個名為 people.csv 檔案的資料集。示例資料檔案如下所示：
id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay .................... .................... ....................
上述示例包含許多記錄。您可以透過點選以下連結下載檔案並將其儲存到 DC 位置。
現在，讓我們按照以下步驟在 DC 中繪製餅圖。
步驟 1：包含指令碼
讓我們使用以下程式碼新增 D3、DC 和 Crossfilter：
<script src = "js/d3.js"></script> <script src = "js/crossfilter.js"></script> <script src = "js/dc.js"></script>
步驟 2：定義變數
建立一個型別為 dc.pieChart 的物件，如下所示：
var pieChart = dc.pieChart('#pie');
這裡，Pie id 與 pie 對映。
步驟 3：讀取資料
使用 d3.csv() 函式讀取您的資料（例如，來自 people.csv）。定義如下：
d3.csv("data/people.csv", function(errors, people) {
console.log(people);
}
這裡，如果資料檔案在指定位置不可用，則 d3.csv() 函式會返回錯誤。
步驟 4：定義 Crossfilter
為 Crossfilter 定義一個變數並將資料分配給 Crossfilter。定義如下：
var mycrossfilter = crossfilter(people);
步驟 5：建立維度
使用以下函式為性別建立維度：
var genderDimension = mycrossfilter.dimension(function(data) {
return data.gender;
});
這裡，人員的性別用於維度。
步驟 6：reduceCount()
透過對上面建立的性別維度 groupDimension 應用 group() 和 reduceCount() 函式來建立一個 Crossfilter 分組。
var genderGroup = genderDimension.group().reduceCount();
步驟 7：生成餅圖
使用下面的函式生成餅圖：
pieChart
.width(800)
.height(300)
.dimension(genderDimension)
.group(genderGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
dc.renderAll();
這裡：
餅圖的寬度設定為 800。
餅圖的高度設定為 300。
餅圖的維度使用 dimension() 方法設定為 genderDimension。
餅圖的分組使用 group() 方法設定為 genderGroup。
使用 DC.js 內建事件 renderlet() 添加了一個點選事件來記錄資料。每當圖表渲染或繪製時，都會呼叫 renderlet。
步驟 8：工作示例
建立一個新的 html 檔案 pie.html，並將上面所有步驟包含在其中，如下所示：
<html>
<head>
<title>DC.js Pie Chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "pie"></div>
</div>
<script language = "javascript">
var pieChart = dc.pieChart('#pie');
d3.csv("data/people.csv", function(errors, people) {
console.log(people);
var mycrossfilter = crossfilter(people);
// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) {
return data.gender;
});
var genderGroup = genderDimension.group().reduceCount();
pieChart
.width(800)
.height(300)
.dimension(genderDimension)
.group(genderGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
dc.renderAll();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
DC.js - 線圖
折線圖用於將資訊顯示為一系列用直線連線的資料點。一個數據點表示兩個值，一個沿水平軸繪製，另一個沿垂直軸繪製。例如，食品的受歡迎程度可以用折線圖繪製，食品沿 x 軸表示，其受歡迎程度沿 y 軸表示。本章詳細解釋了折線圖。
折線圖方法
在繼續繪製折線圖之前，我們應該瞭解 dc.lineChart 類及其方法。dc.lineChart 使用 mixin 來獲取繪製圖表的基本功能。dc.lineChart 使用的 mixin 如下：
- dc.stackMixin
- dc.coordinateGridMixin
dc.lineChart 的完整類圖如下：
dc.lineChart 獲取上述指定 mixin 的所有方法，並且它有自己的方法來繪製折線圖。解釋如下。
dashStyle( [style])
此方法用於設定折線圖的虛線樣式。
dotRadius( [radius])
此方法用於獲取或設定資料點上顯示的點的半徑（以 PX 為單位）。定義如下：
chart.dotRadius = function (radius) {
if (!arguments.length) {
return radius;
}
};
interpolate( [i])
此方法用於獲取或設定線的插值器。
renderArea( [area])
此方法用於獲取或設定渲染區域。
renderDataPoints( [options])
此方法用於為每個資料點渲染單獨的點。
tension( [tension])
此方法用於獲取或設定繪製線的張力。範圍在 0 到 1 之間。
xyTipsOn( [xyTipsOn])
此方法用於更改單個數據點的滑鼠行為。
繪製折線圖
讓我們在 DC 中繪製一個折線圖。為此，我們需要按照以下步驟操作：
步驟 1：定義變數
讓我們定義一個變數，如下所示：
var chart = dc.lineChart('#line');
這裡，dc.linechart 函式對映到具有 id line 的容器。
步驟 2：讀取資料
從 people.csv 檔案讀取資料：
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
這裡，如果我們使用相同的資料集 people.csv，則示例資料檔案如下：
id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay ............... ................ ................
步驟 3：建立年齡維度
現在，為年齡建立維度，如下所示：
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
這裡，我們從 Crossfilter 資料中分配了年齡。
~~ 是一個雙重非按位運算子。它用作 Math.floor() 函式的更快替代品。
現在，使用下面定義的 reduceCount() 函式對其進行分組：
var ageGroup = ageDimension.group().reduceCount();
步驟 4：生成圖表
現在，使用下面給出的程式碼生成折線圖：
chart
.width(800)
.height(300)
.x(d3.scale.linear().domain([15,70]))
.brushOn(false)
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(ageGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
chart.render();
這裡：
圖表寬度為 800，高度為 300。
d3.scale.linear 函式用於使用指定的域範圍 [15, 70] 構造一個新的線性比例尺。
接下來，我們將 brushOn 值設定為 false。
我們將 y 軸標籤設定為 count，x 軸標籤設定為 age。
最後，使用 ageGroup 對年齡進行分組。
步驟 5：工作示例
完整的程式碼清單顯示在以下程式碼塊中。建立一個網頁 line.html 並對其進行以下更改。
<html>
<head>
<title>DC.js Line Chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "line"></div>
</div>
<script language = "javascript">
var chart = dc.lineChart('#line');
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(800)
.height(300)
.x(d3.scale.linear().domain([15,70]))
.brushOn(false)
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(ageGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
chart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
DC.js - 條形圖
條形圖是最常用的圖表型別之一，用於顯示和比較不同離散類別或組的數量、頻率或其他度量（例如平均值）。圖表的構建方式是，不同條形的高度或長度與它們所代表的類別的規模成正比。
x 軸（水平軸）表示不同的類別，它沒有刻度。y 軸（垂直軸）有刻度，它指示測量單位。條形可以垂直或水平繪製，具體取決於類別的數量以及類別的長度或複雜性。
條形圖方法
在繼續繪製條形圖之前，我們應該瞭解 dc.barChart 類及其方法。dc.barChart 使用 mixin 來獲取繪製圖表的基本功能。dc.barChart 使用的 mixin 如下：
- dc.stackMixin
- dc.coordinateGridMixin
dc.barChart 的完整類圖如下：
dc.barChart 獲取上述指定 mixin 的所有方法。此外，它還有自己的方法來繪製條形圖。解釋如下：
alwaysUseRounding( [round])
此方法用於獲取或設定在條形居中時是否啟用舍入。
barPadding( [pad])
此方法用於獲取或設定條形之間的間距，作為條形大小的一部分。可能的填充值在 0-1 之間。
centerBar( [centerBar])
此方法用於設定條形，使其圍繞 x 軸上的資料位置居中。
gap( [gap])
此方法用於設定條形之間的固定間隙。
outerPadding( [pad])
此方法用於設定有序條形圖上的外部填充。
繪製條形圖
讓我們在 DC 中繪製一個條形圖。為此，我們應該按照以下步驟操作：
步驟 1：定義變數
讓我們定義一個圖表變數，如下所示：
var chart = dc.barChart('#bar');
這裡，dc.barChart 函式對映到具有 bar 作為 id 的容器。
步驟 2：讀取資料
從 people.csv 檔案讀取資料。
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
如果資料不存在，則返回錯誤。現在，將資料分配給 Crossfilter。對於此示例，我們將使用相同的 people.csv 檔案，其外觀如下：
id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay .................. .................. ..................
步驟 3：建立年齡維度
現在，為年齡建立維度，如下所示：
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
這裡，我們從 Crossfilter 資料中分配了年齡。~~ 是一個雙重非按位運算子。它用作 Math.floor() 函式的更快替代品。
現在，使用下面顯示的 reduceCount() 函式對其進行分組：
var ageGroup = ageDimension.group().reduceCount();
步驟 4：生成圖表
現在，使用下面給出的程式碼生成條形圖：
chart
.width(800)
.height(300)
.x(d3.scale.linear().domain([15,70]))
.brushOn(false)
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(ageGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
chart.render();
這裡：
圖表寬度為 800，高度為 300。
d3.scale.linear 函式用於使用指定的域範圍 [15, 70] 構造一個新的線性比例尺。
接下來，我們將 brushOn 值設定為 false。
我們將 y 軸標籤設定為 count，x 軸標籤設定為 age。
最後，使用 ageGroup 函式對年齡進行分組。
步驟 5：工作示例
完整的程式碼清單如下。建立一個網頁 bar.html 並對其進行以下更改。
<html>
<head>
<title>DC Bar chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "bar"></div>
</div>
<script language = "javascript">
var chart = dc.barChart('#bar');
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(800)
.height(300)
.x(d3.scale.linear().domain([15,70]))
.brushOn(false)
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(ageGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
chart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
DC.js - 組合圖
組合圖是 DC.js 提供的一種特殊型別的圖表。它提供了一個選項，可以在同一個座標網格中渲染多個圖表。組合圖使用最少的程式碼行實現了高階圖表視覺化選項。
組合圖方法
在繼續繪製組合圖之前，我們需要了解 dc.compositeChart 類及其方法。dc.compositeChart 使用 mixin 來獲取繪製圖表的基本功能。dc.compositeChart 使用的 mixin 如下：
- dc.baseMixin
- dc.marginMixin
- dc.colorMixin
- dc.coordinateGridMixin
dc.barChart 的完整類圖如下：
dc.compositeChart 獲取上述指定 mixin 的所有方法。它有自己的方法來繪製組合圖，解釋如下：
compose( [subChartArray])
設定要在同一個座標網格圖表中渲染的圖表集合。
chart.compose([ dc.lineChart(chart) dc.barChart(chart) ]);
children()
獲取在同一個座標網格中組合的所有圖表。
childOptions( [childOptions])
獲取或設定在同一個座標網格中組合的所有子圖表的圖表選項。
shareTitle( [shareTitle])
獲取或設定圖表的共享標題。如果設定，它將與在同一個座標網格中組合的所有子圖表共享。
shareColors( [shareColors])
類似於 shareTitle() 函式，但它共享顏色而不是標題。
rightY( [yScale])
獲取或設定組合圖右側軸的 y 比例尺。
rightYAxis( [rightYAxis])
獲取或設定組合圖的右側 y 軸。
rightYAxisLabel( rightYAxisLabel[??])
獲取或設定右側 y 軸標籤。
alignYAxes( [alignYAxes])
獲取或設定左側和右側 y 軸之間的對齊方式。
useRightAxisGridLines( [useRightAxisGridLines])
獲取或設定是否從組合圖的右側 y 軸繪製網格線。預設行為是從左側 y 軸繪製。
繪製組合圖
讓我們使用 DC.js 繪製一個組合圖。為此，我們應該按照以下步驟操作：
步驟 1：定義變數
讓我們定義一個圖表變數，如下所示：
var chart = dc.compositeChart('#compoiste');
這裡，dc.compositeChart 函式對映到具有 composite 作為 id 的容器。
步驟 2：讀取資料
從 people.csv 檔案讀取資料：
d3.csv("data/people.csv", function(errors, people) {
}
如果資料不存在，則返回錯誤。我們將使用相同的 people.csv 檔案。示例資料檔案如下：
id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay ............. ............. ..............
步驟 3：對映資料
現在，對映資料，如下所示：
var ndx = crossfilter();
ndx.add(people.map(function(data) {
return {
age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
male: data.gender == 'Male' ? 1 : 0,
female: data.gender == 'Male' ? 0 : 1
};
}));
這裡，我們從 Crossfilter 資料中分配了年齡。~~ 是一個雙重非按位運算子。它用作更快的替代品。
現在，應用維度 age 並使用下面給出的程式碼對性別資料進行分組：
var dim = ndx.dimension(dc.pluck('age')),
grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));
步驟 4：生成圖表
現在，使用下面給出的程式碼生成組合圖：
composite
.width(768)
.height(480)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose ([
dc.lineChart(composite)
.dimension(dim)
.colors('red')
.group(grp1, "Male")
.dashStyle([2,2]),
dc.lineChart(composite)
.dimension(dim)
.colors('blue')
.group(grp2, "Female")
.dashStyle([5,5])
])
.brushOn(false)
.render();
這裡：
圖表寬度為 768，高度為 480。
d3.scale.linear 函式用於使用指定的域範圍 [15, 70] 構造一個新的線性比例尺。
我們將 x 軸標籤設定為 age，y 軸標籤設定為 count。
接下來，將水平網格線渲染為 true。
組合折線圖顏色值 - 男性性別為紅色，女性性別為藍色。
最後，我們將 brushOn 值設定為 false 並渲染圖表。
步驟 5：工作示例
完整的程式碼如下。建立一個網頁 composite.html 並對其進行以下更改。
<html>
<head>
<title>DC composite chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "composite"></div>
</div>
<script type = "text/javascript">
var composite = dc.compositeChart("#composite");
d3.csv("data/people.csv", function(errors, people) {
var ndx = crossfilter();
ndx.add(people.map(function(data) {
return {
age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
male: data.gender == 'Male' ? 1 : 0,
female: data.gender == 'Male' ? 0 : 1
};
}));
var dim = ndx.dimension(dc.pluck('age')),
grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));
composite
.width(768)
.height(480)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose ([
dc.lineChart(composite)
.dimension(dim)
.colors('red')
.group(grp1, "Male")
.dashStyle([2,2]),
dc.lineChart(composite)
.dimension(dim)
.colors('blue')
.group(grp2, "Female")
.dashStyle([5,5])
])
.brushOn(false)
.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
DC.js - 系列圖
系列是一組資料。您可以根據資料繪製圖表。本章詳細解釋瞭如何繪製系列圖表。
系列圖方法
在繼續繪製系列圖之前，我們應該瞭解 dc.seriesChart 類及其方法。dc.seriesChart 使用 Mixin 來獲取繪製圖表的基本功能。dc.seriesChart 使用的 mixin 為：
- dc.stackMixin
dc.seriesChart 的完整類圖如下：
dc.seriesChart 獲取上述指定 mixin 的所有方法。它有自己的方法來繪製系列圖，解釋如下：
chart( [function])
此方法用於獲取或設定圖表函式。
seriesAccessor( [accessor])
它用於獲取或設定顯示系列的訪問器函式。
seriesSort( [sortFunction])
此方法用於獲取或設定一個函式，透過提供系列值對系列列表進行排序。
valueSort( [sortFunction])
此方法用於獲取或設定一個函式，對每個系列的值進行排序。
繪製系列圖
讓我們在 DC 中繪製一個系列圖。在此示例中，讓我們採用一個名為 people_hw.csv 的資料集。示例資料檔案如下：
id,name,gender,height,weight 1,Kinsley,Male,168,90 2,Dimitry,Male,177,61 3,Martica,Female,152,76 4,Brittni,Female,156,88 5,Phillip,Male,161,78 6,Sofie,Female,161,71 7,Avril,Female,163,55 8,Allistir,Male,161,75 9,Emelda,Female,154,66 10,Camella,Female,153,52 ............... ...............
以上示例檔案包含許多記錄。您可以點選以下連結下載檔案並將其儲存到您的DC位置。
現在，讓我們按照以下步驟在DC中繪製系列圖表。
步驟 1：定義變數
讓我們定義如下所示的變數 -
var chart = dc.seriesChart('#line');
這裡，seriesChart函式對映到id line。
步驟 2：讀取資料
從people_hw.csv檔案讀取資料 -
d3.csv("data/people_hw.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
如果資料不存在，則返回錯誤。現在，將資料分配給crossfilter。一旦我們獲得資料，我們可以逐一檢索它並使用下面給出的程式碼檢查性別 -
people.forEach(function(x) {
if(x.gender == 'Male') {
x.newdata = 1;
} else {
x.newdata = 2;
}
});
步驟 3：建立年齡維度
現在，為年齡建立維度，如下所示：
var hwDimension = mycrossfilter.dimension(function(data) {
return [data.gender, data.height];
});
這裡，我們已經分配了維度，它返回性別和身高。現在，使用reduceCount()函式對其進行分組，該函式定義如下 -
var hwGroup = hwDimension.group().reduceCount();
步驟 4：生成圖表
現在，使用下面給出的程式碼生成系列圖表 -
chart
.width(800)
.height(600)
.chart(function(c) {
return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
})
.x(d3.scale.linear().domain([145,180]))
.elasticY(true)
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Count")
.dimension(hwDimension)
.group(hwGroup)
.seriesAccessor(function(d) { return d.key[0];})
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.value; })
legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
.itemWidth(60));
chart.render();
這裡：
- 圖表寬度為800，高度為600。
- 使用d3.scale.linear()方法，我們指定域值。
- 使用seriesAccessor函式，它顯示資料點的系列。
- 鍵和值訪問器從系列中返回鍵和值。
- 圖例可用於新增高度和寬度。
步驟 5：工作示例
完整的程式碼清單如下所示。建立一個網頁line_series.html並在其中新增以下更改。
<html>
<head>
<title>Series chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "line"></div>
</div>
<script language = "javascript">
var chart = dc.seriesChart('#line');
d3.csv("data/people_hw.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
if(x.gender == 'Male') {
x.newdata = 1;
} else {
x.newdata = 2;
}
});
var hwDimension = mycrossfilter.dimension(function(data) {
return [data.gender, data.height];
});
var hwGroup = hwDimension.group().reduceCount();
chart
.width(800)
.height(600)
.chart(function(c) {
return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
})
.x(d3.scale.linear().domain([145,180]))
.elasticY(true)
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Count")
.dimension(hwDimension)
.group(hwGroup)
.seriesAccessor(function(d) { return d.key[0];})
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.value; })
.legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
.legendWidth(120).itemWidth(60));
chart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
DC.js - 散點圖
散點圖是一種數學圖表。它使用笛卡爾座標系來顯示資料集的兩個變數的值。資料以點集的形式顯示，點可以是彩色的。本章詳細解釋了散點圖。
散點圖方法
在繼續繪製散點圖之前，我們應該瞭解dc.scatterPlot類及其方法。dc.scatterPlot使用mixin來獲取繪製圖表的的基本功能。dc.scatterPlot使用的mixin如下所示 -
- dc.coordinateGridMixin
dc.scatterPlot的完整類圖如下所示 -
dc.scatterPlot獲取上述指定mixin的所有方法。它有自己繪製散點圖的方法，解釋如下。
customSymbol( [symbol])
此方法用於獲取或設定符號生成器。
emptySize( [size])
此方法用於設定或獲取組為空時符號的半徑。
excludedColor( [color])
此方法用於獲取或設定從圖表過濾器中排除的符號的顏色。
excludedOpacity( [opacity])
此方法用於獲取或設定從圖表過濾器中排除的符號的不透明度。
excludedSize( [size])
它用於設定或獲取從圖表過濾器中排除的符號的大小。
highlightedSize( [size])
它用於設定或獲取突出顯示符號的半徑。
symbol( [type])
它用於獲取或設定用於每個點的符號型別。
繪製散點圖
讓我們在DC中繪製一個散點圖。在這個例子中，讓我們取一個名為howell1.csv的檔案的資料集。示例資料檔案如下所示 -
"height","weight","age","male" 151.765,47.8256065,63,1 139.7,36.4858065,63,0 136.525,31.864838,65,0 156.845,53.0419145,41,1 145.415,41.276872,51,0 163.83,62.992589,35,1 149.225,38.2434755,32,0 168.91,55.4799715,27,1 147.955,34.869885,19,0 165.1,54.487739,54,1 154.305,49.89512,47,0 ............... ...............
以上示例檔案包含許多記錄。我們可以點選以下連結下載檔案並將其儲存到我們的DC位置。
現在，讓我們按照後續步驟在DC中繪製散點圖。
步驟 1：定義變數
讓我們定義一個變數，如下所示：
var chart = dc.scatterPlot('#scatter');
這裡，scatterplot()函式對映到id scatter。
步驟 2：讀取資料
如下所示從howell1.csv檔案讀取資料 -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
如果資料不存在，則返回錯誤。稍後，將資料分配給crossfilter。
步驟3：獲取記錄
讓我們使用下面給出的程式碼獲取記錄 -
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
});
這裡，我們已經檢查了性別。
步驟4：設定維度
您可以使用下面給出的程式碼設定維度 -
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});
分配維度後，使用下面給出的程式碼對性別進行分組 -
var hwGroup = hwDimension.group().reduceCount();
步驟5：生成圖表
現在，使用下面給出的程式碼生成熱圖 -
chart
.width(800)
.height(600)
.x(d3.scale.linear().domain([0,180]))
.y(d3.scale.linear().domain([0,100]))
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Weight")
.symbolSize(8)
.clipPadding(10)
.dimension(hwDimension)
.group(hwGroup);
這裡：
- 我們已將圖表寬度設定為800，高度設定為600。
- 對x軸和y軸都應用了d3.scale.linear()函式。
- 將brushOn值設定為false。
- 然後，將x軸標籤設定為高度，將y軸標籤設定為重量。
- 將符號大小設定為8，填充值設定為10。
- 最後，對資料進行分組並呈現圖表。
步驟6：工作示例
完整的程式碼清單如下所示。建立一個網頁scatter.html並在其中新增以下更改。
<html>
<head>
<title>Scatter plot Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "scatter"></div>
</div>
<script language = "javascript">
var chart = dc.scatterPlot('#scatter');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
});
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});
var hwGroup = hwDimension.group().reduceCount();
chart
.width(800)
.height(600)
.x(d3.scale.linear().domain([0,180]))
.y(d3.scale.linear().domain([0,100]))
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Weight")
.symbolSize(8)
.clipPadding(10)
.dimension(hwDimension)
.group(hwGroup);
chart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
DC.js - 氣泡圖
氣泡圖用於顯示資料的三個維度。它是散點圖的一種變體，其中資料點被氣泡替換。氣泡的大小是根據資料維度表示的。它使用水平和垂直軸作為值軸。本章詳細解釋了氣泡圖。
氣泡圖方法
在繼續繪製氣泡圖之前，我們應該瞭解dc.bubbleChart類及其方法。dc.bubbleChart使用mixin來獲取繪製圖表的的基本功能，這些功能列在下面 -
- dc.bubbleMixin
- dc.coordinateGridMixin
dc.bubbleChart的完整類圖如下所示 -
dc.bubbleChart獲取上述指定mixin的所有方法。它還有自己繪製氣泡圖的方法，解釋如下 -
elasticRadius( [radius])
此方法用於啟用氣泡半徑。如果我們停用它，則氣泡半徑將自動重新縮放。
sortBubbleSize( [sortBubbleSize])
此方法用於啟用氣泡中的排序功能。較小的氣泡將首先出現，然後逐漸增大。
繪製氣泡圖
讓我們在DC中繪製一個氣泡圖。為此，我們需要按照以下步驟操作 -
步驟 1：定義變數
讓我們定義一個變數，如下所示：
var chart = dc.bubbleChart('#bubble');
這裡，bubbleChart函式對映到id bubble。
步驟 2：讀取資料
從howell1.csv檔案讀取資料。
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
如果資料不存在，則返回錯誤。現在，將資料分配給crossfilter。這裡，我們已經下載了howell1.csv檔案。這裡將使用同一個檔案，它看起來類似於以下程式碼塊。
"height","weight","age","male" 151.765,47.8256065,63,1 139.7,36.4858065,63,0 136.525,31.864838,65,0 156.845,53.0419145,41,1 145.415,41.276872,51,0 163.83,62.992589,35,1 149.225,38.2434755,32,0 168.91,55.4799715,27,1 147.955,34.869885,19,0 165.1,54.487739,54,1 154.305,49.89512,47,0 .................... .....................
步驟3：獲取記錄
讓我們使用下面給出的程式碼獲取記錄 -
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
這裡，我們已經檢查了性別，並使用上述公式設定了x軸的高度和寬度範圍。
步驟4：設定維度
我們可以使用下面給出的程式碼設定維度 -
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
分配維度後，使用下面給出的程式碼對性別進行分組 -
var genderGroup = genderDimension.group().reduceCount();
步驟5：生成圖表
現在，使用下面給出的程式碼生成氣泡圖 -
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
這裡：
我們已將圖表寬度設定為1200，高度設定為400。
接下來，我們指定了邊距點。
然後我們分配了性別維度和組。
鍵和值訪問器從氣泡中返回鍵和值。
使用公式Math.floor((p.value / 10)) + 1計算半徑值訪問器函式。
步驟6：繪製氣泡
現在，使用下面給出的程式碼繪製氣泡 -
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
這裡：
d3.scale.linear函式用於使用指定的域範圍[0,240]為x軸構造一個新的線性比例。
類似地，我們分配了y和半徑線性比例值。
我們將最小半徑標籤值指定為1000，x軸和y軸填充值分別指定為200和100。
接下來，我們指定了最大氣泡相對大小值為0.7。
渲染水平和垂直網格線，然後對映氣泡鍵和值的標題。
步驟7：設定TickFormat
使用下面給出的程式碼設定x軸和y軸的票證格式 -
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
最後，使用chart.render()方法呈現圖表。
步驟8：工作示例
完整的程式碼清單如下所示程式碼塊所示。建立一個網頁bubble.html並在其中新增以下更改。
<html>
<head>
<title>Bubble chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "bubble"></div>
</div>
<script language = "javascript">
var chart = dc.bubbleChart('#bubble');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});
var genderDimension = mycrossfilter.dimension(function(data) {
return [ data.gender, data.heightRange, data.weightRange ];
});
var genderGroup = genderDimension.group().reduceCount();
chart.width(1200)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(genderDimension)
.group(genderGroup)
.keyAccessor(function (p) {
return p.key[1];
})
.valueAccessor(function (p) {
return p.key[2];
})
.radiusValueAccessor(function (p) {
return (Math.floor((p.value / 10)) + 1);
})
.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key[0]
+ "\n"
+ "Height: " + p.key[1] + " cm\n"
+ "Weight: " + p.key[2] + " kg\n"
+ "Count: " + p.value;
});
chart.yAxis().tickFormat(function (s) {
return s + " cm";
});
chart.xAxis().tickFormat(function (s) {
return s + " kg";
});
chart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
DC.js - 熱力圖
熱圖是以地圖形式顯示資料的圖形表示，其中資料值以顏色表示。本章詳細解釋了熱圖。
在繼續繪製熱圖之前，我們應該瞭解dc.heatMap類及其方法。dc.heatMap使用mixin來獲取繪製圖表的的基本功能，這些功能列在下面 -
- dc.colorMixin
- dc.marginMixin
- dc.baseMixin
dc.heatMap的完整類圖如下所示 -
dc.heatMap獲取上述指定mixin的所有方法。它有自己繪製熱圖的方法，解釋如下 -
boxOnClick( [handler])
此方法用於獲取或設定處理程式，當在熱圖中點選單個單元格時。
cols( [cols])
此方法用於獲取或設定用於建立熱圖列的鍵。
colsLabel( [label])
此方法用於獲取或設定列標籤，它表示為列名。類似地，我們也可以執行行標籤。
rows( [rows])
此方法用於獲取或設定用於建立熱圖行的值。
xAxisOnClick( [handler])
此方法用於獲取或設定處理程式，當在x軸上點選列刻度時。
xBorderRadius( [border])
此方法用於設定X邊框半徑。如果將值設定為0，則將獲得完整的矩形。
繪製熱圖
讓我們在DC中繪製一個熱圖。為此，我們需要按照以下步驟操作 -
步驟 1：定義變數
讓我們定義一個變數，如下所示：
var chart = dc.heatMap('#heatmap');
這裡，heatMap函式對映到id heatmap。
步驟 2：讀取資料
如下所示從howell1.csv檔案讀取資料 -
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
這裡，我們使用了相同的howell1.csv檔案，它看起來如下所示 -
"height","weight","age","male" 151.765,47.8256065,63,1 139.7,36.4858065,63,0 136.525,31.864838,65,0 156.845,53.0419145,41,1 145.415,41.276872,51,0 163.83,62.992589,35,1 149.225,38.2434755,32,0 168.91,55.4799715,27,1 147.955,34.869885,19,0 165.1,54.487739,54,1 154.305,49.89512,47,0 ...................... ......................
步驟3：獲取記錄
讓我們使用下面給出的程式碼獲取記錄 -
people.forEach(function(x) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});
這裡，我們已經檢查了性別，並使用上述公式設定了x軸的高度和寬度範圍。
步驟4：設定維度
您可以使用下面給出的程式碼設定維度 -
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});
分配維度後，使用下面給出的程式碼對性別進行分組 -
var genderGroup = genderDimension.group().reduceCount();
步驟5：生成圖表
現在，使用下面給出的程式碼生成熱圖 -
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " + (d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";
})
.calculateColorDomain()
chart.render();
});
這裡：
- 我們已將圖表寬度設定為20 × 45 + 80，高度設定為2 × 45 + 40。
- 然後我們分配了性別維度和組。
- 鍵和值訪問器從熱圖中返回鍵和值。
- 我們必須使用colorAccessor()函式來返回顏色。
- 最後，設定標題並呈現圖表。
步驟6：工作示例
完整的程式碼如下所示。建立一個網頁heatmap.html並在其中新增以下更改。
<html>
<head>
<title>DC heat map Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "heatmap"></div>
</div>
<script language = "javascript">
var chart = dc.heatMap('#heatmap');
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
x.age = Math.floor(x.age) + 1;
x.heightRange = Math.floor(x.height / 10) + 1;
x.weightRange = Math.floor(x.weight / 10) + 1;
if(x.male == 1) {
x.gender = 1;
} else {
x.gender = 2;
}
});
var ageDimension = mycrossfilter.dimension(function(data) {
return [+data.gender, +data.heightRange];
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(20 * 45 + 80)
.height(2 * 45 + 40)
.dimension(ageDimension)
.group(ageGroup)
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.key[0]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
return "Height Range: " + ((d.key[1] - 1) * 10) + " - " +
(d.key[1] * 10) + "cm\n" +
"Gender: " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
"Count: " + (d.value) + " count";})
.calculateColorDomain()
chart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
DC.js - 資料計數
資料計數用於顯示資料集中記錄的總數。它執行以下兩種型別的計數 -
總計數 - 記錄總數。
過濾器計數 - 當前過濾器匹配的記錄數。
資料計數方法
在開始使用資料計數之前，我們應該瞭解**dc.dataCount**類及其方法。dc.dataCount類使用mixin來獲取顯示資料計數的基本功能，如下所示：
- dc.baseMixin
dc.dataCount獲取此mixin的所有方法，並有自己的方法來顯示資料計數，如下所述：
formatNumber( [formatter])
此方法用於獲取或設定過濾器計數和總計數的格式。
html( [options])
它用於獲取或設定HTML模板以顯示所選專案的數量。
**例如**：
counter.html ({
all: 'HTML template to use if all items are selected'
})
這裡，“all”用於使用%total-count選擇所有專案。如果我們只想使用某些專案，則可以使用%filter-count選項使用一些記錄。
資料計數示例
讓我們在DC中執行資料計數。為此，我們需要按照以下步驟操作：
步驟1：新增樣式
讓我們使用以下程式碼在CSS中新增樣式：
.dc-chart { font-size: 12px; }
這裡，我們為圖表分配了樣式。
步驟2：建立變數
讓我們在DC中建立變數，如下所示：
var barChart = dc.barChart('#line');
var countChart = dc.dataCount("#mystats");
這裡，我們在程式碼中分配了一個barChart變數id，而countChart id為mystats。
步驟3：讀取資料
從people.csv檔案讀取資料，如下所示：
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
如果資料不存在，則返回錯誤。現在，將資料分配給crossfilter。
這裡，我們使用people.csv檔案，該檔案在我們之前的圖表示例中使用過。它看起來如下所示：
id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay ......................................... ........................................
步驟4：設定維度
您可以使用下面給出的程式碼設定維度 -
// age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
分配維度後，使用以下程式碼對年齡進行分組：
var ageGroup = ageDimension.group().reduceCount();
步驟5：生成圖表
現在，使用下面給出的程式碼生成條形圖：
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
這裡：
- 我們將圖表寬度設定為400，高度設定為200。
- 接下來，我們將域範圍指定為[15,70]。
- 我們將x軸標籤設定為年齡，y軸標籤設定為計數。
- 我們將elasticY和X函式設定為true。
步驟6：建立和渲染計數圖表
現在，使用以下程式碼建立和渲染計數圖表：
countChart .dimension(mycrossfilter) .group(mycrossfilter.groupAll()); barChart.render(); countChart.render();
這裡，我們將維度分配給crossfilter變數。最後，根據年齡對所有記錄進行分組。
步驟7：工作示例
完整的程式碼如下。建立一個網頁**datacount.html**並向其中新增以下更改。
<html>
<head>
<title>DC datacount sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
<link rel = "stylesheet" type = "text/css" href = "css/dc.css" />
<style>
.dc-chart { font-size: 12px; }
</style>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div style = "width: 600px;">
<div id = "mystats" class = "dc-data-count" style = "float: right">
<span class = "filter-count"></span> selected out of <span
class = "total-count"></span> | <a href = "javascript:dc.filterAll();
dc.renderAll();">Reset All</a>
</div>
</div>
<div style = "clear: both; padding-top: 20px;">
<div>
<div id = "line"></div>
</div>
</div>
</div>
<script language = "javascript">
var barChart = dc.barChart('#line'); // , 'myChartGroup');
var countChart = dc.dataCount("#mystats");
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
// age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
barChart.render();
countChart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
資料計數初始頁面如下所示。
選擇特定年齡後，它會顯示如下螢幕截圖所示的計數。
DC.js - 資料表
資料表用於以表格格式顯示記錄。它列出了本節詳細解釋的crossfilter資料集記錄。
資料表方法
在開始繪製資料表之前，我們應該瞭解**dc.dataTable**類及其方法。它使用mixin來獲取繪製資料表圖的基本功能，該功能定義如下：
- dc.baseMixin
dc.dataTable獲取此mixin的所有方法，並有自己的方法來繪製資料表，這些方法解釋如下。
beginSlice( [slice])
此方法用於獲取或設定起始切片的索引。此方法在實現分頁時很有用。
類似地，您也可以執行endSlice()函式。
columns( [columns])
此方法用於獲取或設定列函式。它使用以下方法來指定要顯示的列。
chart.columns([
function(d) { return d.mark; },
function(d) { return d.low; },
function(d) { return d.high; },
function(d) { return numberFormat(d.high - d.low); },
function(d) { return d.volume; }
]);
這裡，d表示資料集中的一行。我們可以使用HTML在資料表中顯示列。
group(groupFunction)
此方法用於對資料表執行分組函式。
order( [order])
它用於對排序函式進行排序。如果順序是升序，則dimension()將使用.bottom()獲取資料，否則將使用dimension().top()。
資料表示例
讓我們在DC中建立一個數據表。為此，我們需要按照以下步驟操作：
步驟1：新增樣式
讓我們使用以下程式碼在CSS中新增樣式：
.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
這裡，我們為圖表、table-group和grid-column分配了樣式。
步驟2：建立變數
讓我們在DC中建立變數，如下所示：
var barChart = dc.barChart('#line'); //
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");
這裡，我們在程式碼中分配了一個barChart變數id，countChart id為mystats，tableChart id為mytable。
步驟3：讀取資料
從people.csv檔案讀取資料，如下所示：
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
如果資料不存在，則返回錯誤。現在，將資料分配給crossfilter。這裡，我們使用了與之前圖表示例中相同的people.csv檔案。
它看起來如下所示：
id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay .......................................... ..........................................
步驟4：設定維度
您可以使用下面給出的程式碼設定維度 -
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
分配維度後，使用以下程式碼對年齡進行分組：
var ageGroup = ageDimension.group().reduceCount();
步驟5：生成圖表
現在，使用下面給出的程式碼生成條形圖：
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
這裡：
- 我們將圖表寬度設定為400，高度設定為200。
- 接下來，我們將域範圍指定為[15,70]。
- 我們將x軸標籤設定為年齡，y軸標籤設定為計數。
- 我們將elasticY和X函式設定為true。
步驟6：建立資料表
現在，使用以下程式碼建立資料表：
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
這裡，我們指定了年齡維度並對資料進行分組。
步驟7：渲染表格
現在，使用以下程式碼渲染網格：
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();
這裡，我們使用DOB對列進行排序並對記錄進行排序。
步驟8：工作示例
完整的程式碼如下。建立一個網頁datatable.html並向其中新增以下更改。
<html>
<head>
<title>DC datatable sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<style>
.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div style = "width: 600px;">
<div id = "mystats" class = "dc-data-count" style = "float: right">
<span class = "filter-count"></span> selected out of <span
class = "total-count"></span> | <a href = "javascript:dc.filterAll();
dc.renderAll();">Reset All</a>
</div>
</div>
<div style = "clear: both; padding-top: 20px;">
<div>
<div id = "line"></div>
</div>
</div>
<div style = "clear: both">
<div id = "mytable"></div>
</div>
</div>
<script language = "javascript">
var barChart = dc.barChart('#line'); // , 'myChartGroup');
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
// age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，您將看到以下響應。
選擇20到30之間的年齡後，它會顯示如下螢幕截圖所示的表格記錄：
DC.js - 資料網格
資料網格用於過濾和顯示記錄。本章詳細解釋了資料網格。
資料網格方法
在開始繪製資料網格之前，我們應該瞭解**dc.dataGrid**類及其方法。此類使用mixin來獲取繪製資料網格圖的基本功能，該功能定義如下：
- dc.baseMixin
dc.dataGrid獲取此mixin的所有方法，以及有自己的方法來繪製資料網格，如下所述：
beginSlice( [slice])
此方法用於獲取或設定起始切片的索引。此方法在實現分頁時很有用。
類似地，您也可以執行endSlice()。
group(function)
此方法用於對資料網格執行分組函式。
html( [html])
此方法用於獲取或設定生成動態html的函式。
order( [order])
它用於對排序函式進行排序。
size( [size])
它用於顯示網格中的專案數量。
sortBy( [sortByFunction])
此方法用於獲取或設定排序函式。我們可以使用此函式對特定欄位進行排序。例如：我們可以按年齡排序，定義如下：
chart.sortBy(function(d) {
return d.age;
});
資料網格示例
讓我們在DC中執行資料網格。為此，我們需要按照以下步驟操作：
步驟1：新增樣式
讓我們使用以下程式碼在CSS中新增樣式：
.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
這裡，我們為圖表、grid-top和grid-item分配了樣式。
步驟2：建立變數
讓我們在DC中建立變數，如下所述：
var barChart = dc.barChart('#line');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");
這裡，我們在程式碼中分配了一個barChart變數id，countChart id為mystats，gridChart id為mygrid。
步驟3：讀取資料
從**people.csv**檔案讀取資料，如下所示：
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
如果資料不存在，則返回錯誤。現在，將資料分配給crossfilter。
這裡，我們使用了與之前圖表示例中相同的people.csv檔案。它看起來如下所示：
id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay .......................................... .........................................
步驟4：設定維度
您可以使用下面給出的程式碼設定維度 -
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
分配維度後，使用以下程式碼對年齡進行分組：
var ageGroup = ageDimension.group().reduceCount();
步驟5：生成圖表
現在，使用下面給出的程式碼生成條形圖：
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
這裡：
- 我們將圖表寬度設定為400，高度設定為200。
- 接下來，我們將域範圍指定為[15,70]。
- 我們將x軸標籤設定為年齡，y軸標籤設定為計數。
- 我們將elasticY和X函式設定為true。
步驟6：建立網格圖表
現在，使用以下程式碼建立網格圖表：
gridChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
步驟7：渲染網格
現在，使用以下程式碼渲染網格：
.size(100)
.htmlGroup (function(d) {
return 'Age: ' + d.key +
'; Count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortBy(function (d) {
return d.name;
})
.order(d3.ascending);
barChart.render();
countChart.render();
gridChart.render();
這裡，我們使用html()函式對名稱進行了排序，並最終渲染了圖表。
步驟8：工作示例
完整的程式碼如下。建立一個網頁**datagrid.html**並向其中新增以下更改。
<html>
<head>
<title>DC datagrid sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<style>
.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div style = "width: 600px;">
<div id = "mystats" class = "dc-data-count" style = "float: right">
<span class = "filter-count"></span> selected out of <span
class = "total-count"></span> | <a href = "javascript:dc.filterAll();
dc.renderAll();">Reset All</a>
</div>
</div>
<div style = "clear: both; padding-top: 20px;">
<div>
<div id = "line"></div>
</div>
</div>
<div style = "clear: both">
<div class = "dc-data-grid" id = "mygrid"></div>
</div>
</div>
<script language = "javascript">
var barChart = dc.barChart('#line');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
// age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
gridChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
.size(100)
.htmlGroup (function(d) {
return 'Age: ' + d.key +
'; Count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortBy(function (d) {
return d.name;
})
.order(d3.ascending);
barChart.render();
countChart.render();
gridChart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
最初，網格圖表看起來像下面的螢幕截圖。
如果選擇63到66之間的特定年齡，它會過濾出以下記錄。
DC.js - 圖例
圖例是可附加的螢幕自定義。它可以新增到其他DC圖表中以渲染水平圖例標籤。本章詳細解釋了圖例。
圖例方法
圖例支援以下重要方法。讓我們詳細瞭解一下每個方法。
autoItemWidth( [width])
此方法用於開啟或關閉圖例專案的自動寬度設定。如果為true，則忽略itemWidth。定義如下：
legend.autoItemWidth = function (width) {
if (!arguments.length) {
return _width;
}
}
gap( [gap])
此方法用於設定或獲取圖例專案之間的間隙。定義如下：
legend.gap = function (gap) {
if (!arguments.length) {
return _gap;
}
}
horizontal( [h])
此方法用於水平放置圖例，定義如下。
_legend.horizontal = function (h) {
if (!arguments.length) {
return _h;
}
};
itemHeight( [itemHeight])
此方法用於設定或獲取圖例專案高度。
legend.itemHeight = function (itemHeight) {
if (!arguments.length) {
return _itemHeight;
}
};
itemWidth( [itemWidth])
此方法用於設定或獲取水平圖例的圖例專案寬度。
_legend.itemWidth = function (itemWidth) {
if (!arguments.length) {
return _itemWidth;
}
};
legendText( [text])
此方法用於設定或獲取圖例文字函式。圖例小部件使用此函式來渲染每個專案的圖例文字。如果沒有指定函式，圖例小部件將顯示與每個組關聯的名稱。一個簡單的示例如下所示：
legend.legendText(dc.pluck('name'))
maxItems( [items])
此方法用於顯示最大圖例專案數。
x( [x])
它用於設定或獲取圖例小部件的x座標，定義如下：
legend.x = function (x) {
if (!arguments.length) {
return _x;
}
};
類似地，您也可以執行y座標。
DC.js - 儀表板工作示例
在本節中，我們將透過單擊和選擇圖表來在DC中開發一個儀表板。
工作示例
現在，我們有了背景，可以開始編寫一些程式碼了。它包含以下步驟：
步驟1：新增樣式
讓我們使用以下程式碼在CSS中新增樣式。
<style>
.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
這裡，我們為圖表、grid-top和grid-item分配了樣式。
步驟2：建立變數
讓我們在DC中建立變數，如下所示。
var barChart = dc.barChart('#line');
var pieChart = dc.pieChart('#pie');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");
這裡，我們在程式碼中分配了一個barChart變數id，countChart id為mystats，pieChart為pie，gridChart id為mygrid。
步驟3：讀取資料
從people.csv檔案讀取資料，如下所示。
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
如果資料不存在，則返回錯誤。現在，將資料分配給crossfilter。這裡，我們使用了與之前圖表示例中相同的**people.csv**檔案。它看起來如下所示。
id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay ......................................... .........................................
步驟4：設定年齡維度
您可以使用以下程式碼設定維度。
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
分配維度後，使用以下程式碼對年齡進行分組。
var ageGroup = ageDimension.group().reduceCount();
步驟5：設定性別維度
您可以使用以下程式碼設定維度。
// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; });
var genderGroup = genderDimension.group().reduceCount();
步驟6：生成條形圖
現在，使用以下程式碼生成條形圖。
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
這裡：
- 我們將圖表寬度設定為400，高度設定為200。
- 接下來，我們將域範圍指定為[15, 70]。
- 我們將x軸標籤設定為年齡，y軸標籤設定為計數。
- 我們將elasticY和X函式設定為true。
步驟7：生成餅圖
現在，使用以下程式碼生成餅圖。
pieChart .width(200) .height(100) .dimension(genderDimension) .group(genderGroup);
這裡：
- 我們將圖表寬度設定為200，高度設定為100。
- 現在，按性別對維度進行分組。
步驟8：建立網格和計數圖表
現在，使用以下程式碼建立網格和計數圖表。
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
gridChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
步驟9：渲染網格和計數
現在，使用以下程式碼渲染網格和計數。
.size(100)
.htmlGroup (function(d) {
return 'Age: ' + d.key +
'; Count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortBy(function (d) {
return d.name;
})
.order(d3.ascending);
barChart.render();
pieChart.render();
countChart.render();
gridChart.render();
這裡，我們使用html()函式對名稱進行了排序，並最終渲染了圖表。
步驟10：工作示例
完整的程式碼如下。建立一個網頁**dashboard.html**並向其中新增以下更改。
<html>
<head>
<title>DC dashboard sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<style>
.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div style = "width: 600px;">
<div id = "mystats" class = "dc-data-count" style = "float: right">
<span class = "filter-count"></span> selected out of <span
class = "total-count"></span> | <a href = "javascript:dc.filterAll();
dc.renderAll();">Reset All</a>
</div>
</div>
<div style = "clear: both; padding-top: 20px;">
<div>
<div id = "line"></div>
<div id = "pie"></div>
</div>
</div>
<div style = "clear: both">
<div class = "dc-data-grid" id = "mygrid"></div>
</div>
</div>
<script language = "javascript">
var barChart = dc.barChart('#line'); // , 'myChartGroup');
var pieChart = dc.pieChart('#pie'); //, 'myChartGroup');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
// age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) {
return data.gender;
});
var genderGroup = genderDimension.group().reduceCount();
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
pieChart
.width(200)
.height(100)
.dimension(genderDimension)
.group(genderGroup);
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
gridChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
.size(100)
.htmlGroup (function(d) {
return 'Age: ' + d.key +
'; Count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortBy(function (d) {
return d.name;
})
.order(d3.ascending);
barChart.render();
pieChart.render();
countChart.render();
gridChart.render();
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
您可以透過單擊條形圖、餅圖並檢視資料如何變化來自行檢查。