DC.js-シリーズチャート

シリーズはデータのセットです。データに基づいてグラフをプロットできます。この章では、シリーズチャートの詳細な描画方法について説明します。

シリーズチャートメソッド

シリーズチャートを描画する前に、 dc.seriesChart クラスとそのメソッドを理解する必要があります。 dc.seriesChartは、ミックスインを使用して、チャートを描画する基本機能を取得します。 dc.seriesChartで使用されるミックスインは-

dc.stackMixin

dc.seriesChartの完全なクラス図は次のとおりです-

シリーズチャートメソッド

dc.seriesChartは、上記の指定されたミックスインのすべてのメソッドを取得します。以下に説明するシリーズチャートを描画する独自のメソッドがあります-

チャート（[関数]）

このメソッドは、チャート関数を取得または設定するために使用されます。

seriesAccessor（[アクセサ]）

表示されたシリーズのアクセサー関数を取得または設定するために使用されます。

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の場所に保存できます。

link：/dcjs/src/people_hw.csv [people_hw.csv]

ここで、DCでシリーズチャートを描画するために、次の手順に従ってください。

ステップ1：変数を定義する

以下に示すように変数を定義しましょう-

var chart = dc.seriesChart('#line');

ここでは、seriesChart関数がid行にマッピングされています。

ステップ2：データを読む

people_hw.csvファイルからデータを読み取ります-

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

データが存在しない場合、エラーを返します。次に、データをクロスフィルターに割り当てます。データを取得したら、それを1つずつ取得し、以下に示すコーディングを使用して性別を確認できます-

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：作業例

完全なコードリストは次のとおりです。 Webページ line_seriesl を作成し、次の変更を追加します。

<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>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

シリーズチャート

Dcjs-series-chart

DC.js-シリーズチャート

シリーズチャートメソッド

チャート（[関数]）

seriesAccessor（[アクセサ]）

seriesSort（[sortFunction]）

valueSort（[sortFunction]）

シリーズチャートを描く

ステップ1：変数を定義する

ステップ2：データを読む

ステップ3：年齢ディメンションを作成する

ステップ4：チャートを生成する

ステップ5：作業例

目次