DC.js - 折线图

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

折线图方法

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

dc.stackMixin
dc.coordinateGridMixin

dc.lineChart 的完整类图如下 -

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

dashStyle( [样式])

该方法用于设置折线图的虚线样式。

点半径([半径])

此方法用于获取或设置数据点上显示的点的半径（以 PX 为单位）。它的定义如下 -

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

插值（[i]）

此方法用于获取或设置一条线的插值器。

渲染区域([区域])

该方法用于获取或设置渲染区域。

渲染数据点（[选项]）

此方法用于为每个数据点渲染单独的点。

张力（[张力]）

该方法用于获取或设置所绘制线条的张力。它的范围是从 0 到 1。

xyTipsOn( [xyTipsOn])

此方法用于更改单个数据点的鼠标Behave。

绘制折线图

让我们在 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>

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