DC.js-折れ線グラフ

折れ線グラフは、直線で結ばれた一連のデータポイントとして情報を表示するために使用されます。データポイントは2つの値を表し、1つは横軸に沿ってプロットされ、もう1つは縦軸に沿ってプロットされます。たとえば、食品の人気は、食品がx軸に沿って表され、その人気がy軸に沿って表されるように、折れ線グラフとして描くことができます。この章では、折れ線グラフについて詳しく説明します。

折れ線グラフの方法

折れ線グラフの作成に進む前に、 dc.lineChartクラスとそのメソッド。dc.lineChartは、ミックスインを使用して、グラフを描画する基本的な機能を取得します。dc.lineChartで使用されるミックスインは次のとおりです-

  • dc.stackMixin
  • dc.coordinateGridMixin

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

dc.lineChartは、上記で指定されたミックスインのすべてのメソッドを取得するだけでなく、折れ線グラフを描画するための独自のメソッドも備えています。それらは以下のように説明されます。

dashStyle([スタイル])

このメソッドは、折れ線グラフのダッシュスタイルを設定するために使用されます。

dotRadius([半径])

このメソッドは、データポイントに表示されるドットの半径(PX単位)を取得または設定するために使用されます。それは次のように定義されます-

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

補間([i])

このメソッドは、ラインの内挿を取得または設定するために使用されます。

renderArea([area])

このメソッドは、レンダリング領域を取得または設定するために使用されます。

renderDataPoints([オプション])

このメソッドは、各データポイントの個々のドットをレンダリングするために使用されます。

テンション([テンション])

この方法は、描かれた線の張力を取得または設定するために使用されます。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)) 
});

ここでは、クロスフィルターデータから年齢を割り当てました。

~~は、二重の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:実例

完全なコードリストは、次のコードブロックに示されています。Webページを作成する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>

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