マウスイベントでグラフを変化させる

D3.jsでは要素にイベントを設定することができます。この記事ではマウスカーソルが棒に重なったとき・離れたときに色を変化させてみます。

D3.jsではイベントを追加するにはon()メソッドを使います。on()メソッドは１番目のパラメーターにイベント名、２番目のパラメーターにイベントが発生したときに実行する関数を指定します。この関数はイベントハンドラといいます。on()メソッドにはブラウザで設定できるイベントであれば何でも設定できます。

on()メソッドに設定できるイベントには下記のような物があり、いずれも文字列で指定します。

イベント名	詳細
click	クリックしたときのイベント
dblclick	ダブルクリック時のイベント
mouseover	マウスが乗った時のイベント
mouseout	マウスが離れた時のイベント
mousemove	マウスが移動したときのイベント
keydown	キーダウンイベント
keyup	キーアップイベント
change	ちゃん時(内容が変わった時)イベント
load	読込完了時のイベント

on()メソッドで設定したイベントが発生すると、設定した関数(イベントハンドラ)が呼び出されます。グラフの棒の色を変化させる処理をしてますが、どの棒にマウスが重なったかはD3.jsでは、d3.select(this)とかくと、イベントが発生した要素をを把握することができます。要素を指定できれば、style()メソッドを使い、プロパティ名と値を設定するだけです。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>D3.js　mouseover,mouseoutとしたときに棒グラフの色を変える</title>

	<style>
	svg{
		width:320px;
		height:340px;
		border:2px solid black;
	}
	rect{fill:green;}
	.fillPink{fill:pink;}


	/*
		縦棒グラフにラベルを表示する設定
	*/
	.barNum{
		font-size:10px;
		text-anchor:middle;
	}
	
	.axis text{
		font-family:sans-serif;
		font-size:11px;
	}
	.axis path,
	.axis line{
		fill:none;
		stroke:green;
	}
	.axisX line{
		fill:none;
		stroke:black;
	}
	.barName{
		font-size:9px;
		text-anchor:middle;
	}
	</style>
	<script src="../js/d3.js"></script>

</head>
<body>
	<h2>縦棒グラフを表示</h2>
	<svg id="graph"></svg>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>D3.js　mouseover,mouseoutとしたときに棒グラフの色を変える</title>

<style>

svg{

width:320px;

height:340px;

border:2px solid black;

}

rect{fill:green;}

.fillPink{fill:pink;}

縦棒グラフにラベルを表示する設定

.barNum{

font-size:10px;

text-anchor:middle;

}

.axis text{

font-family:sans-serif;

font-size:11px;

}

.axis path,

.axis line{

fill:none;

stroke:green;

}

.axisX line{

fill:none;

stroke:black;

}

.barName{

font-size:9px;

text-anchor:middle;

}

</style>

</head>

<body>

<h2>縦棒グラフを表示</h2>

</body>

</html>

	var svgWidth  = 320  //svg要素の幅
	var svgHeight = 320; //svg要素の高さ
	var xOffset = 40;    //Ｘ座標のずれ具合
	var yOffset = 10;    //Ｙ座標のずれ具合
	var bar;             //棒グラフの棒の要素を格納

	var arrData = [120,80,150,200,110,260,220,40,100];
	var maxNum = 300;
	var barWidth = 20;
	var barMargin = 5;

	//棒グラフを描画
	bar = d3.select("#graph")
		.selectAll("rect")
		.data(arrData);

	bar.enter()
	.append("rect")
	.attr("class", "fillPink")

	//アニメーションの初期値０を設定
	.attr("height",0) 

	.attr("width",barWidth)
	.attr("x",function(d,i){
		return i * (barWidth + barMargin) + xOffset;
	})
	
	.attr("y", svgHeight - yOffset )  //グラフの一番下に座標を設定

	/*
		棒グラフにマウスを乗せた時の処理はここで行う
	*/
	.on("mouseover",function(){
		d3.select(this)
		.style("fill","green")
	})

	/*
		棒グラフからマウスが離れた時の処理はここで行う
	*/
	.on("mouseout",function(){
		d3.select(this)
		.style("fill","pink")
	})

	.transition()   //アニメーションをする
	.duration(1200) //アニメーションする時間

	/*
		縦棒グラフの左側から
		アニメーションを開始するように設定する
	*/
	.delay(function(d,i){
		return i * 120;
	})
	.attr("y",function(d,i){  //Y座標を指定
		return svgHeight - d - yOffset; //Y座標を計算
	})
	.attr("height",function(d,i){
		return d;
	})


	//棒グラフの数値を描画する
	bar.enter()              //text要素を指定
	.append("text")          //text要素を追加
	.attr("class","barNum")  //CSSクラスを指定
	.attr("x",function(d,i){ //Ｘ座標を指定
		return i * (barWidth + barMargin) + 10 + xOffset;  //棒グラフの表示間隔に合わせる
	})
	.attr("y", svgHeight -5 - yOffset )//Ｙ座標を指定
	.text(function(d,i){     //データを表示
		return d;
	});

	//目盛り表示の為の縮尺表示
	var yScale = d3.scale.linear()
				.domain([0,maxNum])
				.range([maxNum,0]);

	d3.select("#graph")
	.append("g")
	.attr("class","axis")
	.attr("transform", "translate(" + xOffset + ", " + ((svgHeight - 300)- yOffset) + ")")
	.call(
		d3.svg.axis()
		.scale(yScale)
		.orient("left")
		
	/*	.ticks(20)
		.tickValues( [10.50,30.36,50,100,200,300] )
		.tickFormat(d3.format(".2f"))
	*/	
	);

	//横方向の線を表示する
	d3.select("#graph")
	.append("rect")
	.attr("class","axisX")
	.attr("width",300)
	.attr("height",1)
	.attr("transform","translate(" + xOffset + ", " + (svgHeight - yOffset ) + ")" );

	//棒のラベルを表示する
	bar.enter()
	.append("text")
	.attr("class","barName")
	.attr("x",function(d,i){
		return i * 25 + 10 + xOffset;
	})
	.attr("y", svgHeight - yOffset + 15 )

	/*
		下記のコードは、ラベルはtext要素を追加することで表示します。
		棒グラフ内にデータを表示します。今回のデータセットには、
		データ内にラベル名の情報は含まれていません。
		以下のようにすると、配列に表示するラベルの文字を格納しておき
		順場に応じて返すようにします。
	*/
	.text(function(d,i){
		return ["A","B","C","D","E","F","G","H","I"][i];
	});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

var svgWidth = 320 //svg要素の幅

var svgHeight = 320; //svg要素の高さ

var xOffset = 40; //Ｘ座標のずれ具合

var yOffset = 10; //Ｙ座標のずれ具合

var bar; //棒グラフの棒の要素を格納

var arrData = [120,80,150,200,110,260,220,40,100];

var maxNum = 300;

var barWidth = 20;

var barMargin = 5;

//棒グラフを描画

bar = d3.select("#graph")

.selectAll("rect")

.data(arrData);

bar.enter()

.append("rect")

.attr("class", "fillPink")

//アニメーションの初期値０を設定

.attr("height",0)

.attr("width",barWidth)

.attr("x",function(d,i){

return i * (barWidth + barMargin) + xOffset;

})

.attr("y", svgHeight - yOffset ) //グラフの一番下に座標を設定

棒グラフにマウスを乗せた時の処理はここで行う

.on("mouseover",function(){

d3.select(this)

.style("fill","green")

})

棒グラフからマウスが離れた時の処理はここで行う

.on("mouseout",function(){

d3.select(this)

.style("fill","pink")

})

.transition() //アニメーションをする

.duration(1200) //アニメーションする時間

縦棒グラフの左側から

アニメーションを開始するように設定する

.delay(function(d,i){

return i * 120;

})

.attr("y",function(d,i){ //Y座標を指定

return svgHeight - d - yOffset; //Y座標を計算

})

.attr("height",function(d,i){

return d;

})

//棒グラフの数値を描画する

bar.enter() //text要素を指定

.append("text") //text要素を追加

.attr("class","barNum") //CSSクラスを指定

.attr("x",function(d,i){ //Ｘ座標を指定

return i * (barWidth + barMargin) + 10 + xOffset; //棒グラフの表示間隔に合わせる

})

.attr("y", svgHeight -5 - yOffset )//Ｙ座標を指定

.text(function(d,i){ //データを表示

return d;

});

//目盛り表示の為の縮尺表示

var yScale = d3.scale.linear()

.domain([0,maxNum])

.range([maxNum,0]);

d3.select("#graph")

.append("g")

.attr("class","axis")

.attr("transform", "translate(" + xOffset + ", " + ((svgHeight - 300)- yOffset) + ")")

.call(

d3.svg.axis()

.scale(yScale)

.orient("left")

/* .ticks(20)

.tickValues( [10.50,30.36,50,100,200,300] )

.tickFormat(d3.format(".2f"))

);

//横方向の線を表示する

d3.select("#graph")

.append("rect")

.attr("class","axisX")

.attr("width",300)

.attr("height",1)

.attr("transform","translate(" + xOffset + ", " + (svgHeight - yOffset ) + ")" );

//棒のラベルを表示する

bar.enter()

.append("text")

.attr("class","barName")

.attr("x",function(d,i){

return i * 25 + 10 + xOffset;

})

.attr("y", svgHeight - yOffset + 15 )

下記のコードは、ラベルはtext要素を追加することで表示します。

棒グラフ内にデータを表示します。今回のデータセットには、

データ内にラベル名の情報は含まれていません。

以下のようにすると、配列に表示するラベルの文字を格納しておき

順場に応じて返すようにします。

.text(function(d,i){

return ["A","B","C","D","E","F","G","H","I"][i];

});