📌  相关文章
📜  DC.js-条形图

📅  最后修改于: 2020-10-25 09:50:37             🧑  作者: Mango

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

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轴上的数据位置为中心的条形图。

差距（[差距]）

此方法用于在钢筋之间设置固定间隙。

externalPadding（[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数据中分配了年龄。 ~~是一个双重NOT按位运算运算符。它用作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，并对其进行以下更改。

DC Bar chart Sample

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