/*
散布図を表示する
*/
var svgWidth = 300; // SVG要素の幅
var svgHeight = 300; // SVG要素の高さ
var offsetX = 30; // Ｘ座標のずれ
var offsetY = -20; // Ｙ座標のずれ
var arrData = [
[16,32],[64,48],[128,92],[70,150],[120,300],
[45,90],[110,160],[300,20],[180,180],[15,145]
];
var circleElements = d3.select("#graph")
.selectAll("circle") // circle要素を追加
.data(arrData);
circleElements
.enter()
.append("circle") // CSSクラスを指定
.attr("class","mark")
.attr("cx",function(d,i){
return d[0] + offsetX; // １番目の要素をＸ表に指定
})
.attr("cy",function(d,i){
return svgHeight - d[1] - offsetY; // ２番目の要素をＹ座標に指定
})
.attr("r",4); // 点の半径
// アニメーション後の散布図に使用するデータを再設定
function generateData(data){
var result = data
.map(function(d,i){
// 配列の要素数だけ繰り返す
var x = Math.random() * svgWidth; // Ｘ座標を設定
var y = Math.random() * svgHeight; // Ｙ座標を設定
return [x, y];
});
return result;
}
// 散布図を更新する関数
function generateGraph(){
circleElements
.data(arrData)
.transition()
.attr("cx",function(d,i){
return d[0] + offsetX;
})
.attr("cy",function(d,i){
return svgHeight - d[1] - offsetY;
});
}
function drawScale(){
var maxX = d3.max(arrData,function(d,i){
/*
以下のようにd[ ]の添字を０を指定すると
Ｘ座標の最大値を求めることができます。
*/
return d[0]; // Ｘ座標
});
var maxY = d3.max(arrData,function(d,i){
/*
以下のようにd[ ]の添字を１を指定すると
Ｙ座標の最大値を求めることができます。
*/
return d[1]; // Ｙ座標
});
// 縦の目盛りを表示するために縮尺設定
var yScale =
/*
上記で求めた最大値maxYをここで使用する。
*/
d3.scale.linear() // 縮尺設定
.domain([0, maxY]) // 元データの範囲
.range([maxY, 0]); // 実際の出力サイズ
// 目盛りを表示
d3.select("#graph")
.append("g")
.attr("class","axis")
.attr("transform","translate(" + offsetX + ", " +
( svgHeight - maxY - offsetY ) + ")" )
.call(
d3.svg.axis()
.scale(yScale)
.orient("left")
);
// 横の目盛りを表示するために縮尺設定
var xScale =
/*
上記で求めた最大値maxXをここで使用する。
*/
d3.scale.linear() // 縮尺設定
.domain([0, maxX]) // 元データの範囲
.range([0, maxX]); // 実際の出力サイズ
// 目盛りを表示
d3.select("#graph")
.append("g")
.attr("class","axis")
.attr("transform","translate(" + offsetX + ", " +
( svgHeight - offsetY ) + ")" )
.call(
d3.svg.axis()
.scale(xScale)
.orient("bottom")
);
}
drawScale();
// 一定時間後に行う処理
setInterval(function(){
arrData = generateData( arrData ); // データを更新
generateGraph(); // グラフの更新(アニメーション)
},2000);