DC.js - 系列圖表

系列是一組資料。您可以根據資料繪製圖表。本章詳細解釋瞭如何繪製系列圖表。

系列圖表方法

在繪製系列圖表之前，我們應該瞭解dc.seriesChart類及其方法。dc.seriesChart使用 Mixins 來獲得繪製圖表的 basic 功能。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 line 對映。

步驟 2：讀取資料

從 people_hw.csv 檔案讀取資料：

d3.csv("data/people_hw.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

如果資料不存在，則返回錯誤。現在，將資料分配給 crossfilter。一旦我們獲取資料，我們可以逐個檢索資料並使用下面給出的程式碼檢查性別：

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()函式對其進行分組：

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>

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

列印頁面