DC.js - 条形图

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

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轴上的数据位置.

间隙([间隙])

此方法用于设置条形之间的固定间隙./p>

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,CreditCardType1,Damaris,Female,1973-02-18,false,visa-electron2,Barbe,Female,1969-04-10,true,americanexpress3,Belia,Female,1960-04-16,false,maestro4,Leoline,Female,1995-01-19,true,bankcard5,Valentine,Female,1992-04-16,false,6,Rosanne,Female,1985-01-05,true,bankcard7,Shalna,Female,1956-11-01,false,jcb8,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]的新线性标度./p>

• 接下来，我们将brushOn值设置为false.

• 我们分配y-轴标签为计数，x轴标签为年龄.

• 最后，使用ageGroup函数对年龄进行分组.

第5步:工作示例

完整的代码清单如下.创建一个网页 bar.html 并添加以下更改.