DC.js-円グラフ
円グラフは、円形の統計グラフです。数値の比率を示すためにスライスに分割されています。この章では、DC.jsを使用して円グラフを描画する方法について詳しく説明します。
円グラフの方法
円グラフの描画に進む前に、 dc.pieChartクラスとそのメソッド。dc.pieChartは、ミックスインを使用して、グラフを描画する基本的な機能を取得します。dc.pieChartで使用されるミックスインは次のとおりです-
- baseMixin
- capMixin
- colorMixin
dc.pieChartの完全なクラス図は次のとおりです-
dc.pieChartは、上記で指定されたミックスインのすべてのメソッドを取得するだけでなく、円グラフを具体的に描画するための独自のメソッドも備えています。それらは次のとおりです-
- cx（[cx]）
- drawPaths（[パス]）
- emptyTitle（[タイトル]）
- externalLabels（[ラベル]）
- innerRadius（[innerRadius]）
- minAngleForLabel（[minAngleForLabel]）
- radius（[radius]）
- スライスキャップ（[キャップ]）
これらのそれぞれについて詳しく説明しましょう。
cx（[cx]）
これは、以下に定義されている中心x座標位置を取得または設定するために使用されます。
chart.cx = function (cx) {
if (!arguments.length) {
return (_cx || _chart.width() / 2);
}
};同様に、y座標位置を実行できます。
drawPaths（[パス]）
このメソッドは、円グラフのパスを描画するために使用され、以下で定義されます-
chart.drawPaths = function (path) {
if (arguments.length === 0) {
return path;
}
};emptyTitle（[タイトル]）
このメソッドは、データがない場合にタイトルを設定するために使用されます。以下に定義されています-
chart.emptyTitle = function (title) {
if (arguments.length === 0) {
return title;
}
};externalLabels（[ラベル]）
チャートの外縁からオフセットされたスライスラベルを配置するために使用されます。以下に定義されています-
chart.externalLabels = function (label) {
if (arguments.length === 0) {
return label;
}
};innerRadius（[innerRadius]）
このメソッドは、円グラフの内側の半径を取得または設定するために使用されます。内半径がより大きい場合0pxの場合、円グラフはドーナツグラフとしてレンダリングされます。以下に定義されています-
_chart.innerRadius = function (innerRadius) {
if (!arguments.length) {
return _innerRadius;
}
};minAngleForLabel（[minAngleForLabel]）
このメソッドは、ラベルレンダリングの最小スライス角度を取得または設定するために使用されます。以下に定義されています-
_chart.minAngleForLabel = function (minAngleForLabel) {
if (!arguments.length) {
return _minAngleForLabel;
}
_minAngleForLabel = minAngleForLabel;
return _chart;
};radius（[radius]）
このメソッドは、外半径を取得または設定するために使用されます。半径が指定されていない場合、最小チャートの幅と高さの半分が必要になります。以下に定義されています-
_chart.radius = function (radius) {
if (!arguments.length) {
return _givenRadius;
}
_givenRadius = radius;
return _chart;
};スライスキャップ（[キャップ]）
円グラフが生成するスライスの最大数を取得または設定します。上のスライスは、高いものから低いものへの値によって決定されます。上限を超える他のスライスは、1つの「その他」スライスにロールアップされます。
円グラフを描く
DCで円グラフを作成しましょう。この円グラフの例では、という名前のデータセットを取り上げましょう。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
....................
....................
....................上記のサンプルには多くのレコードが含まれています。次のリンクをクリックしてファイルをダウンロードし、DCの場所に保存できます。
people.csv
ここで、DCで円グラフを描画するために、次の手順に従います。
ステップ1：スクリプトを含める
次のコードを使用して、D3、DC、およびクロスフィルターを追加しましょう-
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>ステップ2：変数を定義する
タイプのオブジェクトを作成し、 dc.pieChart 以下に示すように-
var pieChart = dc.pieChart('#pie');ここでは、PieIDがPieにマップされています。
ステップ3：データを読む
を使用して（たとえば、people.csvから）データを読み取ります d3.csv()関数。それは次のように定義されます-
d3.csv("data/people.csv", function(errors, people) {
console.log(people);
}ここで、データファイルが指定された場所で利用できない場合、d3.csv（）関数はエラーを返します。
ステップ4：クロスフィルターを定義する
Crossfilterの変数を定義し、データをCrossfilterに割り当てます。以下に定義されています-
var mycrossfilter = crossfilter(people);ステップ5：ディメンションを作成する
以下の関数を使用して、性別のディメンションを作成します-
var genderDimension = mycrossfilter.dimension(function(data) {
return data.gender;
});ここでは、人々の性別が次元に使用されます。
ステップ6：reduceCount（）
上記で作成した性別ディメンションにgroup（）関数とreduceCount（）関数を適用して、クロスフィルターグループを作成します- groupDimension。
var genderGroup = genderDimension.group().reduceCount();ステップ7：パイを生成する
以下の関数を使用してパイを生成します-
pieChart
.width(800)
.height(300)
.dimension(genderDimension)
.group(genderGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
dc.renderAll();ここに、
円グラフの幅は800に設定されています。
円グラフの高さは300に設定されています。
円グラフの寸法はに設定されています genderDimension dimension（）メソッドを使用します。
円グラフのグループはに設定されています genderGroup group（）メソッドを使用します。
DC.jsの組み込みイベントを使用してデータをログに記録するクリックイベントを追加しました。 renderlet()。チャートがレンダリングまたは描画されるたびに、レンダーレットが呼び出されます。
ステップ8：実例
新しいhtmlファイルpie.htmlを作成し、以下に示すように上記のすべての手順を含めます-
<html>
<head>
<title>DC.js Pie 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 = "pie"></div>
</div>
<script language = "javascript">
var pieChart = dc.pieChart('#pie');
d3.csv("data/people.csv", function(errors, people) {
console.log(people);
var mycrossfilter = crossfilter(people);
// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) {
return data.gender;
});
var genderGroup = genderDimension.group().reduceCount();
pieChart
.width(800)
.height(300)
.dimension(genderDimension)
.group(genderGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
dc.renderAll();
});
</script>
</body>
</html>ここで、ブラウザをリクエストすると、次の応答が表示されます。