DC.js - 線圖

線圖用於將資訊顯示為由直線連線的一系列資料點。一個數據點表示兩個值，一個沿水平軸繪製，另一個沿垂直軸繪製。例如，食品的受歡迎程度可以繪製成線圖，這樣食品在 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 資料中分配了年齡。

~~ 是雙重 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：工作示例

完整的程式碼清單顯示在以下程式碼塊中。建立一個網頁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>

現在，請求瀏覽器，我們將看到以下響應。

列印頁面