フィッシュアイプラグインを使ってみる

今回は、マウスカーソルを重ねたときに、マウスカーソルを中心にして拡大するフィッシュアイプラグインを利用します。
フィッシュアイプラグインはこちら

まずは上記のプラグインをダウンロードします。今回は、jsフォルダ内にfisheye.jsというファイル名で用意し、HTMLファイル内でD3.jsファイルを読み込んだ後に、このプラグインも読み込みます。これで準備ＯＫです。
サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>パックレイアウトで人口を表示する</title>
	<script src="../js/d3.js"></script>
	<script src="../js/fisheye.js"></script>
	<style>
		svg{
			width:320px;
			height:320px;
			border:2px solid black;
		}
		circle{
			stroke:none;
			opacity:0.25;
		}
		text{
			font-size:10px;
			text-anchor:middle;
			fill:black;
			opacity:0;
		}
	</style>
</head>
<body>
	<h1>パックレイアウトを表示</h1>
	<svg id="graph"></svg>
	<form>
		<input type="button" value="2005年" data-year="year2005">
		<input type="button" value="2010年" data-year="year2010">
		<input type="button" value="2015年" data-year="year2015">
	</form>
	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>パックレイアウトで人口を表示する</title>

<style>

svg{

width:320px;

height:320px;

border:2px solid black;

}

circle{

stroke:none;

opacity:0.25;

}

text{

font-size:10px;

text-anchor:middle;

fill:black;

opacity:0;

}

</style>

</head>

<body>

<h1>パックレイアウトを表示</h1>

<form>

</form>

</body>

</html>

/*
	パックレイアウトを表示
*/
(function(){

	// HTMLファイルで設定した#graphの幅、高さを取得する
	var svgEle = document.getElementById("graph");
	var svgWidth = getComputedStyle( svgEle, null)
					.getPropertyValue("width");
	var svgHeight = getComputedStyle( svgEle, null)
					.getPropertyValue("height");

	svgWidth = parseFloat( svgWidth );   // 整数に変換する
	svgHeight = parseFloat( svgHeight ); // 整数に変換する


	var pack;							// 円を包むg要素の一覧
	var circles;						// circle要素一覧
	var texts;							// text要素一覧
	var bubble;							// パックレイアウトオブジェクト
	var arrData;						// 円のデータを全て格納する
	var year ="year2005";				// 表示するデータを示す文字列

	// JSONデータを読み込む
	d3.json("data.json",function(error,data){
		arrData = data;
		drawPackLayout(data);
	});

	function drawPackLayout(jsonData){
		var color = d3.scale.category10(); // 10色指定

		// パックレイアウトを使うための設定
		bubble = d3.layout.pack().size([320,320]);

		// パックレイアウトで利用するグループを作成
		pack = d3.select("#graph")
			.selectAll("g")

		/*
			valueキーが無いときは、特定のキーをパックレイアウトの
			valueとして使いたいとき、value()メソッドをつかいます。
			このメソッドに関数を指定して、valueとして使いたいデータを
			返すようにします。下記のようにかけば、任意の年の人口の数値を
			返します。

			yearの値は、"year2005"という文字列を設定していて、HTMLファイルの
			ボタンのdata-year="year2005"という文字列に対応させるようにします。
		*/
			.data( bubble.value(function(d,i){
				return d[year];
			})
			.nodes(jsonData))  // データセットを要素に設定
			.enter()
			.append("g");

		circles = pack.append("circle")
			.attr("r",0)
			.attr("transform",function(d,i){
				return "translate(" + d.x + "," + d.y + ")";
			})
			.style("fill", function(d,i){
				return color(i);
			});

		circles.transition()
			.duration(function(d,i){
				return d.depth * 800 + 800;
			})
			.attr("r",function(d){
				return d.r;
			});

		texts  = pack.append("text")
			.attr("transform",function(d,i){
				return "translate(" + d.x + "," + d.y + ")";
			});

		texts.style("opacity",1)
			.transition()
			.duration(3000)
			.style("opacity",1)
			.text(function(d,i){
				if( d.depth == 1 ){
					return d.name;
				}
				return null;
			});
	}

	// HTML上のボタンをクリックしたときに処理はここでする。
	d3.selectAll("input").on("click",function(){
		year = d3.select(this).attr("data-year");

		pack.data( bubble.value(function(d,i){
			// ここで違う年度の値を返却する
			return d[year];
		}).nodes( arrData ));             // データセットに要素を設定

		circles
			.transition()
			.duration(500)
			.ease("bounce")
			.attr("r",function(d,i){
					return d.r;
			})
			.attr("transform",function(d,i){
				return "translate(" + d.x + "," + d.y + ")";
			});

		texts
			.transition()
			.duration(500)
			.ease("bounce")
			.attr("transform",function(d,i){
				return "translate(" + d.x + "," + d.y + ")";
			});
	});

	// フィッシュアイを設定
	var fisheye = 
		d3.fisheye.circular()
		.radius(64)
		.distortion(2);

	// マウスオバーしたときの処理
	d3.select("#graph").on("mouseover", function(){

		fisheye.focus( d3.mouse(this) ); // マウス座標をズームの中心にする
		circles.each(function(d,i){		 // ズーム対象の様相に対して処理
		/*
			計算結果をfisheyeオブジェクトのx,y,zプロパティに代入
		*/
			d.fisheye = fisheye(d);		 
			d.r = d.r					 // 円を拡大するための処理
		})
		.attr("r",function(d){
			return d.fisheye.z * d.r;	 // 半径 = 拡大率 * 半径とする
		});
	});
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

パックレイアウトを表示

(function(){

// HTMLファイルで設定した#graphの幅、高さを取得する

var svgEle = document.getElementById("graph");

var svgWidth = getComputedStyle( svgEle, null)

.getPropertyValue("width");

var svgHeight = getComputedStyle( svgEle, null)

.getPropertyValue("height");

svgWidth = parseFloat( svgWidth ); // 整数に変換する

svgHeight = parseFloat( svgHeight ); // 整数に変換する

var pack; // 円を包むg要素の一覧

var circles; // circle要素一覧

var texts; // text要素一覧

var bubble; // パックレイアウトオブジェクト

var arrData; // 円のデータを全て格納する

var year ="year2005"; // 表示するデータを示す文字列

// JSONデータを読み込む

d3.json("data.json",function(error,data){

arrData = data;

drawPackLayout(data);

});

function drawPackLayout(jsonData){

var color = d3.scale.category10(); // 10色指定

// パックレイアウトを使うための設定

bubble = d3.layout.pack().size([320,320]);

// パックレイアウトで利用するグループを作成

pack = d3.select("#graph")

.selectAll("g")

valueキーが無いときは、特定のキーをパックレイアウトの

valueとして使いたいとき、value()メソッドをつかいます。

このメソッドに関数を指定して、valueとして使いたいデータを

返すようにします。下記のようにかけば、任意の年の人口の数値を

返します。

yearの値は、"year2005"という文字列を設定していて、HTMLファイルの

ボタンのdata-year="year2005"という文字列に対応させるようにします。

.data( bubble.value(function(d,i){

return d[year];

})

.nodes(jsonData)) // データセットを要素に設定

.enter()

.append("g");

circles = pack.append("circle")

.attr("r",0)

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

return "translate(" + d.x + "," + d.y + ")";

})

.style("fill", function(d,i){

return color(i);

});

circles.transition()

.duration(function(d,i){

return d.depth * 800 + 800;

})

.attr("r",function(d){

return d.r;

});

texts = pack.append("text")

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

return "translate(" + d.x + "," + d.y + ")";

});

texts.style("opacity",1)

.transition()

.duration(3000)

.style("opacity",1)

.text(function(d,i){

if( d.depth == 1 ){

return d.name;

}

return null;

});

}

// HTML上のボタンをクリックしたときに処理はここでする。

d3.selectAll("input").on("click",function(){

year = d3.select(this).attr("data-year");

pack.data( bubble.value(function(d,i){

// ここで違う年度の値を返却する

return d[year];

}).nodes( arrData )); // データセットに要素を設定

circles

.transition()

.duration(500)

.ease("bounce")

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

return d.r;

})

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

return "translate(" + d.x + "," + d.y + ")";

});

texts

.transition()

.duration(500)

.ease("bounce")

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

return "translate(" + d.x + "," + d.y + ")";

});

// フィッシュアイを設定

var fisheye =

d3.fisheye.circular()

.radius(64)

.distortion(2);

// マウスオバーしたときの処理

d3.select("#graph").on("mouseover", function(){

fisheye.focus( d3.mouse(this) ); // マウス座標をズームの中心にする

circles.each(function(d,i){ // ズーム対象の様相に対して処理

計算結果をfisheyeオブジェクトのx,y,zプロパティに代入

d.fisheye = fisheye(d);

d.r = d.r // 円を拡大するための処理

})

.attr("r",function(d){

return d.fisheye.z * d.r; // 半径 = 拡大率 * 半径とする

});

})();