Dcjs-series-chart
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>ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。
