目录
  1. WIKI教程
  2. 学习DC.js
  3. DC.js - 快速指南

DC.js - 快速指南

DC.js - Introduction

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 Library为用户交互提供即时反馈。

DC.js Features

DC.js是最好的数据可视化框架之一，它可用于生成简单和复杂的可视化。 下面列出了一些突出的功能 -

  • Extremely flexible.
  • 使用方便。
  • 快速渲染图表。
  • 支持大型多维数据集。
  • 开源JavaScript库。

Dc.js Benefits

DC.js是一个开源项目，与其他项目相比，它需要更少的代码。 它具有以下好处 -

  • 出色的数据可视化
  • 执行图形过滤。
  • 快速创建图表和仪表板。
  • 创建高度交互的仪表板。

在下一章中，我们将了解如何在我们的系统上安装D3.js。

DC.js - Installation

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

  • DC.js库
  • Editor
  • 网页浏览器
  • 网络服务器

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

DC.js Installation

直流安装非常容易设置。 按照以下步骤在您的计算机上安装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 Editor

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

  • Visual Studio代码
  • WebStorm
  • Eclipse
  • SublimeText

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

网页浏览器

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

网络服务器

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

我们可以使用任何我们都熟悉的Web服务器。 例如 - IIS，Apache等。

查看页面

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

DC.js - Concepts

对于大多数前端开发人员来说，DC.js简单易用。 它可以快速构建基本图表，即使不知道D3.js. 之前，我们开始使用DC.js来创建可视化; 我们需要熟悉Web标准。 D3.js中大量使用以下Web标准，这是用于渲染图表的DC.js的基础。

  • 超文本标记语言（HTML）
  • 文档对象模型（DOM）
  • 层叠样式表（CSS）

让我们详细了解这些Web标准。

Hypertext Markup Language (HTML)

我们知道，HTML用于构建网页的内容。 它存储在扩展名为“.html”的文本文件中。

典型的基本HTML示例如下所示 - 

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

Document Object Model (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文档的文档对象模型如下 -

DOM

Cascading Style Sheets (CSS)

虽然HTML为网页提供了一种结构，但CSS样式使网页更加令人愉悦。 CSS是一种样式表语言，用于描述用HTML或XML编写的文档的表示（包括SVG或XHTML等XML方言）。 CSS描述了如何在网页上呈现元素。

JavaScript

JavaScript是一种松散类型的客户端脚本语言，可在用户的浏览器中执行。 JavaScript与html元素（DOM元素）交互，以使Web用户界面具有交互性。 JavaScript实现ECMAScript标准，其中包括基于ECMA-262规范的核心功能以及不基于ECMAScript标准的其他功能。 JavaScript知识是DC.js的先决条件。

组件 (Components)

DC.js基于两个优秀的JavaScript库，它们是 -

  • Crossfilter
  • D3.js

Crossfilter (Crossfilter)

Crossfilter是一个JavaScript库，用于在浏览器中探索大型多变量数据集。 它用于非常快速地分组，过滤和聚合数十或数十万行原始数据。

D3.js

D3.js代表数据驱动文档。 D3.js是一个用于根据数据操作文档的JavaScript库。 D3是动态，交互式，在线数据可视化框架，并在大量网站中使用。 D3.js由Mike Bostock编写，作为早期可视化工具包Protovis的继承者而创建。 D3.js用于数十万个网站。

DC.js - Introduction to 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.size() - 返回交叉过滤器中的记录数。

  • crossfilter.groupAll() - 它是一个用于对所有记录进行分组并减少为单个值的函数。

  • crossfilter.dimension(value) - 用于使用指定的值访问器函数构造新维度。

  • dimension.filter(value) - 用于过滤维度匹配值的记录，并返回维度。

  • dimension.filterRange(range) - 过滤尺寸值大于或等于范围[0]且小于范围[1]的记录。

  • dimension.filterAll() - 清除此维度上的所有过滤器。

  • dimension.top(k) - 用于根据此维度的自然顺序返回包含前k个记录的新数组。

  • dimension.bottom(k) - 用于根据此维度的自然顺序返回包含底部k记录的新数组。

  • dimension.dispose() - 用于从交叉过滤器中删除维度。

在下一章中，我们将简要了解D3.js.

DC.js - Introduction to D3.js

D3.js是一个JavaScript库，用于在浏览器中创建交互式可视化。 D3库允许我们在数据集的上下文中操纵网页的元素。 这些元素可以是HTML，SVG或Canvas元素，可以根据数据集的内容进行引入，删除或编辑。 它是一个用于操作DOM对象的库。 D3.js可以成为数据探索的宝贵帮助。 它使您可以控制数据的表示，并允许您添加数据交互性。

与其他库相比，D3.js是最重要的框架之一。 这是因为; 它适用于Web和数据可视化，具有企业级。 另一个原因是其极大的灵活性，使世界各地的开发人员能够创建许多高级图表。 此外，它还在很大程度上扩展了其功能。

让我们了解D3.js的基本概念，如下 -

  • Selections
  • 数据加入
  • SVG
  • Transition
  • Animation
  • D3.js API

让我们详细了解这些概念。

选择(Selections)

选择是D3.js的核心概念之一。 它基于CSS Selector概念。 那些已经使用并了解JQuery的人已经可以轻松理解选择。 它使我们能够基于CSS选择器选择DOM，然后提供修改，追加和删除DOM元素的选项。

数据加入

数据连接是D3.js中的另一个重要概念。 它与选择一起使用，使我们能够根据我们的数据集（一系列数值）操作HTML文档。 默认情况下，D3.js为数据集提供其方法中的最高优先级，数据集中的每个项目对应于HTML元素。

SVG

SVG代表Scalable Vector Graphics 。 SVG是一种基于XML的矢量图形格式。 它提供了绘制不同形状的选项，如直线，矩形，圆形，椭圆等。因此，使用SVG设计可视化为您提供更多功能和灵活性。

转型(Transformation)

SVG提供了转换单个SVG形状元素或SVG元素组的选项。 SVG变换支持翻译，缩放，旋转和倾斜。

过渡(Transition)

过渡是从一个项目的一个状态转换到另一个状态的过程。 D3.js提供了一个transition（）方法来在HTML页面中执行转换。

动画 (Animation)

D3.js通过过渡支持动画。 动画可以通过正确使用过渡来完成。 转换是一种有限形式的关键帧动画，只有两个关键帧: start和end 。 起始关键帧通常是DOM的当前状态，而结束关键帧是您指定的一组属性，样式和其他属性。 转换非常适合转换到新视图，而不需要依赖于起始视图的复杂代码。

D3.js API

让我们简要了解一些重要的D3.js API的方法。

集合API

集合只是一个将多个元素组合到一个单元中的对象。 它也被称为容器。 它包含对象，地图，集合和巢穴。

路径API

路径用于绘制矩形，圆形，椭圆形，折线，多边形，直线和曲线。 SVG路径表示可以描边，填充，用作剪切路径或三者的任意组合的形状轮廓。

Axis API

D3.js提供绘制轴的功能。 轴由线，刻度和标签组成。 轴使用比例，因此每个轴都需要给出一个可以使用的比例。

缩放API

缩放有助于扩展您的内容。 您可以使用单击并拖动方法专注于特定区域。

分隔符分隔值API

分隔符是一个或多个字符的序列，用于指定纯文本或其他数据中单独的独立区域之间的边界。 字段分隔符是逗号分隔值的序列。 简而言之，分隔符分隔值是逗号分隔值（CSV）或制表符分隔值（TSV）。

DC.js - Mixins

Mixin是一个abstract functional object具有许多预定义的函数，可以在JavaScript类中混合使用。 但是，它们不能单独使用。 例如，DC.js有一个Mixin和dc.baseMixin ，它不能按原样使用，但是被所有DC图表类使用，例如折线图，饼图等.DC.js有一组有限的有用的Mixins可以轻松高效地创建图表。 它们如下 -

  • baseMixin - baseMixin为所有类型的图表提供通用功能。 它集成了crossfilter和d3.js JavaScript库，并提供了一组简单的函数来创建具有D3.js知识的图表。

  • capMixin - capMixin为限制（上限）以下的数据元素提供分组支持。

  • colorMixin - colorMixin为图表提供颜色支持。

  • marginMixin - marginMixin为图表提供保证金支持。

  • coordinateGridMixin - coordinateGridMixin为图表提供坐标支持。

  • stackMixin - stackMixin使用d3.layout.stack提供堆叠支持。

  • bubbleMixin - bubbleMixin为图表提供了气泡支持。

让我们在随后的章节中详细了解所有这些混合。

DC.js - baseMixin

baseMixin提供创建任何类型图表所需的基本方法。 范围从设置图表的宽度到图表的高级过滤。

一般图表选项

basicMixin提供了许多图表方法来获取/设置图表的属性。 它们如下，

  • chartID() - 返回图表的内部数字ID。

  • chartGroup( [chartGroup]) - 获取或设置图表所属的组。 在DC.js中，图表可以分组为一组。 预期组中的所有图表将共享相同的Crossfilter数据集。 它们同时渲染和重绘。 

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]) - 返回图表的SVGE元素。

  • resetSvg() - 重置DOM中的SVG容器。

  • root( [rootElement]) - 获取图表的根容器。

数据选项

basicMixin提供了为图表设置数据的方法。 数据设置为Crossfilter维度和组。 此外，它还提供了获取基础数据集的选项。

  • dimension( [dimension]) - 设置或获取图表的维度。 维度是任何有效的Crossfilter维度。 

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);

  • group( group[??]) - 设置或获取图表组。 组是任何有效的Crossfilter组。 可以使用第二个参数命名该组，以便稍后在代码中使用它。 

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]) - 获取或设置密钥访问者函数。 它用于从底层的Crossfilter组中检索密钥。 该键用于饼图中的切片和线/条形图中的x轴。 默认key accessor功能如下 - 

chart.keyAccessor(function(d) { return d.key; });

  • valueAccessor( [valueAccessor]) - 获取或设置值访问器函数。 它用于从底层的Crossfilter组中检索值。 该值用于饼图中的切片大小和线/条形图中的y轴位置。 默认value accessor功能如下 - 

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])

获取或设置图表的过滤器。 如果提供的过滤器是新的，则它将添加到图表的过滤器集合中并应用于基础数据集。 如果提供的过滤器已在图表的过滤器集合中可用，则它将删除过滤器并对基础数据执行相关过滤。 简而言之，过滤方法将切换提供的过滤器。 

mychart.filter(10);

要删除所有过滤器，请使用null值调用filter方法。 过滤器可以是以下任何一项 -

  • null - 图表将删除以前应用的所有过滤器。

  • single value - 图表将调用底层Crossfilter的过滤方法并发送提供的值。

  • dc.filters.RangedFilter - 它接受两个值，低和高。 图表将过滤掉所有数据，但低值和高值之间的值除外。

  • dc.filters.TwoDimensionalFilter - 它接受热图中使用的二维值。

  • dc.filters.RangedTwoDimensionalFilter - 它类似于dc.filters.RangedFilter，不同之处在于它接受仅在散点图中使用的二维值。

hasFilter( [filter])

检查图表中是否提供了提供的过滤器。

replaceFilter( [filter])

用提供的过滤器替换图表的当前过滤器。

filters()

返回与图表关联的所有当前过滤器。

filterAll()

清除与图表关联的所有过滤器。

filterHandler( [filterHandler])

获取或设置过滤器处理函数。 图表使用过滤器处理程序功能使用过滤器过滤基础数据集。 Chart具有默认筛选处理程序功能，可以使用此方法替换为自定义筛选处理程序函数。 默认的过滤器处理程序如下 - 

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-filter处理函数。 图表使用此函数来检查过滤器集合中是否有过滤器可用。 默认的has-filter处理程序如下 - 

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-filter处理函数。 图表使用此函数将过滤器添加到图表的过滤器集合中。 默认的添加过滤器处理程序如下 - 

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler( [removeFilterHandler])

获取或设置remove-filter处理函数。 图表使用此函数从图表的过滤器集合中删除过滤器。 默认的删除过滤器如下 - 

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-filter处理函数。 图表使用此功能重置图表的过滤器集合。 默认的重置过滤器如下 - 

function (filters) {
   return [];
}

filterPrinter( [filterPrinterFunction])

获取或设置打印机过滤器功能。 图表使用此功能打印过滤器信息。

commitHandler()

获取或设置提交处理程序。 提交处理程序的目的是将过滤后的数据异步发送到服务器。

活动选项

DC.js定义了一组有限的事件来执行某些功能，例如过滤，缩放等.DC.js中定义的事件列表如下 -

  • renderlet - 重新绘制和渲染过渡后触发。

  • pretransition - 在转换开始之前触发。

  • preRender - 在图表渲染之前触发。

  • postRender - 在图表完成渲染后触发，包括所有渲染的逻辑。

  • preRedraw - 在图表重绘之前触发。

  • postRedraw - 在图表完成重绘后触发，包括所有renderlet的逻辑。

  • filtered - 在应用，添加或删除过滤器后触发。

  • zoomed - 触发缩放后触发。

basicMixin提供了一个on(event, listener)方法，用于为所有上面定义的事件设置回调函数。

  • on(event, listener) - 设置特定事件的回调或侦听器函数。

  • onClick(datum) - 它作为每个图表的onClick处理程序传递给D3。 默认行为是过滤单击的数据（传递给回调）并重绘图表组。

渲染选项

basicMixin提供了呈现图表的方法列表。 它们用于绘制图表，它们如下 -

  • render() - 渲染图表。 通常，在绘制图表时首先使用它。

  • renderGroup() - 在此图表所属的情况下呈现组中的所有图表。

  • renderLabel( [renderLabel]) - 打开/关闭标签渲染。

  • renderTitle( [renderTitle]) - 打开/关闭标题渲染。

  • redraw() - 重绘整个图表。

  • redrawGroup() - 重绘该redrawGroup()表所属的组中的所有图表。

过渡期权

basicMixin提供了设置图表过渡效果的方法，它们如下 -

  • transitionDelay( [delay]) - 设置或获取此图表实例的动画转换延迟（以毫秒为单位）。

  • transitionDuration( [duration]) - 设置或获取此图表实例的动画转换持续时间（以毫秒为单位）。

  • useViewBoxResizing( [useViewBoxResizing]) - 如果设置，则根据SVG视图框属性调整图表大小。

  • controlsUseVisibility( [controlsUseVisibility]) - 如果设置，则使用visibility属性而不是display属性来显示/隐藏图表重置和过滤控件。

在下一章中，我们将了解capMixin。

DC.js - capMixin

capMixin可以将低于某个值的数据元素列表分组为“其他”。 它适用于行图和饼图。 capMixin的层次结构如下图所示。

capMixin

capMixin提供了四种查找Others部分的方法，它们如下 -

Method 1: cap( [count]) - 获取或设置将包含在上限中的元素数。

Method 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;
});

Method 3: othersLabel( [label]) - 获取或设置“其他”组的标签。

Method 4: takeFront( [takeFront]) - 获取或设置封顶的方向。 如果设置，则图表从排序的数据元素数组中获取前面的项目; 否则它将采取最后的项目。

DC.js - colorMixin

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

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

Coordinate＆Axis也称为coordinateGridMixin ，旨在支持多种基于坐标网格的具体图表类型，如条形图，折线图等.assiteGridMixin的层次结构在下图中定义。

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 - Pie Chart

饼图是圆形统计图。 它被分成切片以显示数字比例。 本章介绍如何使用DC.js详细绘制饼图。

饼图方法

在继续绘制饼图之前，我们应该了解dc.pieChart类及其方法。 dc.pieChart使用mixins来获得绘制图表的基本功能。 dc.pieChart使用的mixins如下 -

  • baseMixin
  • capMixin
  • colorMixin

dc.pieChart的完整类图如下 -

饼图方法

dc.pieChart获取上面指定的mixins的所有方法，并且有自己的方法来专门绘制饼图。 它们如下 -

  • 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位置。

people.csv

现在，让我们遵循以下步骤在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用​​饼图映射。

第3步:读取数据

使用d3.csv()函数读取数据（例如，来自d3.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; 
});

在这里，人们的性别被用于维度。

Step 6: reduceCount()

通过在上面创建的性别维度 - groupDimension上应用group（）和reduceCount（）函数来创建groupDimension 。 

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 。

  • 添加了一个click事件，使用DC.js内置事件renderlet 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 - Line Chart

折线图用于将信息显示为由直线连接的一系列数据点。 数据点表示两个值，一个沿水平轴绘制，另一个沿垂直轴绘制。 例如，食物项目的流行度可以绘制为折线图，使得食物项目沿x轴表示，并且其流行度沿y轴表示。 本章详细介绍了折线图。

折线图方法

在继续绘制折线图之前，我们应该了解dc.lineChart类及其方法。 dc.lineChart使用mixins来获取绘制图表的基本功能。 dc.lineChart使用的mixins如下 -

  • dc.stackMixin
  • dc.coordinateGridMixin

dc.lineChart的完整类图如下 -

折线图方法

dc.lineChart获取上面指定的mixins的所有方法，并且它有自己的绘制折线图的方法。 它们解释如下。

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()函数对其进行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对年龄进行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 - Bar Chart

条形图是最常用的图形类型之一，用于显示和比较不同离散类别或组的数量，频率或其他度量（例如平均值）。 构造图表使得不同条的高度或长度与它们所代表的类别的大小成比例。

x轴（水平轴）表示没有比例的不同类别。 y轴（垂直轴）具有刻度，这表示测量单位。 可以垂直或水平绘制条，这取决于类别的数量和类别的长度或复杂性。

条形图方法

在绘制条形图之前，我们应该了解dc.barChart类及其方法。 dc.barChart使用mixins来获取绘制图表的基本功能。 dc.barChart使用的mixins如下 -

  • 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()函数对其进行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轴标签指定为计数，将x轴标签指定为年龄。

  • 最后，使用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 - Composite Chart

复合图表是DC.js提供的一种特殊类型的图表。 它提供了在同一坐标网格中渲染多个图表的选项。 复合图表使用最少的代码行启用高级图表可视化选项。

复合图表方法

在继续绘制复合图表之前，我们需要了解dc.compositeChart类及其方法。 dc.compositeChart使用mixins来获取绘制图表的基本功能。 dc.compositeChart使用的mixins如下 -

  • 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数据中分配了年龄。 ~~是一个双非按位运算符。 它被用作更快的替代品。

现在，应用维度年龄并使用下面给出的编码对性别数据进行分组 - 

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轴标签指定为年龄，将y轴标签指定为计数。

  • 接下来，将水平网格线渲染为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 - Series Chart

系列是一组数据。 您可以根据数据绘制图表。 本章介绍如何详细绘制系列图表。

系列图表方法

在继续绘制系列图表之前，我们应该了解dc.seriesChart类及其方法。 dc.seriesChart使用Mixins来获取绘制图表的基本功能。 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位置。

people_hw.csv

现在，让我们遵循以下步骤在DC中绘制系列图表。

第1步:定义变量

让我们定义变量，如下所示 - 

var chart = dc.seriesChart('#line');

这里，seriesChart函数与id行映射。

第2步:读取数据

从people_hw.csv文件中读取数据 - 

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;
   }
});

第3步:创建年龄维度

现在，为年龄创建一个维度，如下所示 - 

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [data.gender, data.height];
});

在这里，我们已经分配了维度，它返回了性别和高度。 现在，使用reduceCount()函数对其进行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 - Scatter Plot

散点图是一种数学图表。 它使用笛卡尔坐标表示，通常显示一组数据的两个变量的值。 数据显示为点的集合，点可能是彩色的。 本章详细介绍了散点图。

散点图方法

在继续绘制散点图之前，我们应该了解dc.scatterPlot类及其方法。 dc.scatterPlot使用mixins来获得绘制图表的基本功能。 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位置。

howell1.csv

现在，让我们按照后续步骤在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);
}

如果数据不存在，则返回错误。 稍后，将数据分配给交叉过滤器。

第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 - Bubble Chart

气泡图用于显示数据的三个维度。 它是散点图的变体，其中数据点被气泡替换。 气泡大小相对于数据维度表示。 它使用水平轴和垂直轴作为数值轴。 本章详细介绍了气泡图。

气泡图方法

在继续绘制气泡图之前，我们应该了解dc.bubbleChart类及其方法。 dc.bubbleChart使用mixins来获得绘制图表的基本功能，如下所示 -

  • dc.bubbleMixin
  • dc.coordinateGridMixin

dc.bubbleChart的完整类图如下 -

气泡图方法

dc.bubbleChart获取上述mixin的所有方法。 它也有自己绘制气泡图的方法，如下所述 -

elasticRadius( [radius])

此方法用于启用气泡半径。 如果我们禁用此功能，则会自动重新调整气泡半径。

sortBubbleSize( [sortBubbleSize])

此方法用于启用气泡中的排序功能。 较小的气泡将首先出现，然后逐渐增加。

绘制气泡图

让我们在DC绘制一个气泡图。 为此，我们需要按照以下步骤进行操作 -

第1步:定义变量

让我们定义一个变量，如下所示 - 

var chart = dc.bubbleChart('#bubble');

这里，bubbleChart函数与id气泡映射。

第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) {
   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函数用于构造具有x轴的指定域范围[0,240]的新线性标度。

  • 同样，我们分配了y和radius线性比例值。

  • 我们将最小半径标签值分别指定为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 - Heat Map

热图是地图形式的数据的图形表示，其中数据值表示为颜色。 本章详细介绍了热图。

在继续绘制热图之前，我们应该了解dc.heatMap类及其方法。 dc.heatMap使用mixins来获取绘制图表的基本功能，如下所示 -

  • dc.colorMixin
  • dc.marginMixin
  • dc.baseMixin

dc.heatMap的完整类图如下 -

热图

dc.heatMap获取上面指定的mixins的所有方法。 它有自己的绘制热图的方法，如下所述 -

boxOnClick( [handler])

当在热图中单击单个单元格时，此方法用于获取或设置处理程序。

cols( [cols])

此方法用于获取或设置键以创建热图的列。

colsLabel( [label])

此方法用于获取或设置列标签，该列标签表示为列名称。 同样，我们也可以执行行标签。

rows( [rows])

此方法用于获取或设置用于创建热图行的值。

xAxisOnClick( [handler])

当在x轴上单击列标记时，此方法用于获取或设置处理程序。

xBorderRadius( [border])

此方法用于设置X边框半径。 如果该值设置为0，那么您将获得完整的矩形。

绘制热图

让我们在DC中绘制热图。 为此，我们需要按照以下步骤进行操作 -

第1步:定义变量

让我们定义一个变量，如下所示 - 

var chart = dc.heatMap('#heatmap');

这里，heatMap函数与id热图映射。

第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 - Data Count

数据计数用于显示数据集中的记录总数。 它执行以下两种计数 -

  • Total-count - 记录总数。

  • Filter-count - 当前过滤器匹配的记录数。

数据计数方法

在继续使用数据计数之前，我们应该了解dc.dataCount类及其方法。 dc.dataCount类使用mixin来获取显示数据计数的基本功能，即 -

  • dc.baseMixin

dc.dataCount获取此mixin的所有方法，并有自己的方法来显示数据计数，如下所述 -

formatNumber( [formatter])

此方法用于获取或设置过滤器计数和总计数的格式。

html( [options])

它用于获取或设置HTML模板以显示所选项目的数量。

For example - 

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);
}

如果数据不存在，则返回错误。 现在，将数据分配给交叉过滤器。

在这里，我们使用的是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 - Data Table

数据表用于以表格格式显示记录。 它列出了本章中详细解释的交叉过滤器数据集记录。

数据表方法

在继续绘制数据表之前，我们应该了解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; }

在这里，我们为图表，表组和网格列分配了样式。

第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);
}

如果数据不存在，则返回错误。 现在，将数据分配给交叉过滤器。 在这里，我们使用了相同的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>

现在，请求浏览器，您将看到以下响应。

新页面打开

DC.js - Data Grid

数据网格用于过滤和显示记录。 本章详细介绍了数据网格。

数据网格方法

在继续绘制数据网格之前，我们应该了解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);
}

如果数据不存在，则返回错误。 现在，将数据分配给交叉过滤器。

在这里，我们使用了相同的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>

现在，请求浏览器，我们将看到以下响应。

新页面打开

DC.js - Legend

Legend是一个可附加的屏幕定制。 它可以添加到其他DC图表以渲染水平图例标签。 本章详细介绍了图例。

传奇方法

Legend支持以下重要方法。 让我们详细介绍其中的每一个。

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 - Dashboard Working Example

在本章中，我们将通过单击并选择图表来在DC中开发仪表板。

工作示例 (Working Example)

现在，我们有了背景，可以开始编写一些代码。 它包含以下步骤 -

第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>

在这里，我们为图表，网格顶部和网格项分配了样式。

第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);
}

如果数据不存在，则返回错误。 现在，将数据分配给交叉过滤器。 在这里，我们使用了相同的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>

现在，请求浏览器，我们将看到以下响应。

新页面打开

您可以通过单击条形图，饼图并查看数据如何更改来检查自己。

<上一篇.DC.js - 仪表板工作示例( Dashboard Working Example)
DC.js - 有用的资源.下一篇>
↑回到顶部↑
WIKI教程 @2018