マップのブロック（領域）にマウスを乗せたら背景色を変える (SVG使用)

説明

D3.jsのツリーマップでマップのブロック（領域）にマウスを乗せたら背景色を変えるにはon()メソッドを使います。最初のパラメーターに"mouseover"や"mouseout"のイベント名を指定し、2番目のパラメーターにイベント発生時の関数を指定します。関数内ではd3.select(this)とすることでマウスが乗った要素を指定することができます。あとは、transition()とstyle()メソッドを使って背景色を変化させます。
これ以外の説明についてはこちらのページを参照してください。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
#myGraph {
position: relative;
width : 480px;
height : 300px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

// ファイル名とファイルサイズのデータ
var fileList = {
"name": "root_dir",
"children": [
{
"name": "sub_dir_A",
"children": [
{
"name": "sub_dir_B",
"children": [
{ "name": "ファイル A", "size": 5000 },
{ "name": "ファイル B", "size": 3000 },
{ "name": "ファイル C", "size": 1000 }
]
},
{
"name": "sub_dir_C",
"children": [
{ "name": "ファイル D", "size": 800 },
{ "name": "ファイル E", "size": 200 }
]
}
]
}
]
}
// Treemapレイアウトにする
var treemap = d3.layout.treemap()
	.size([480, 300])	// 横幅480px, 縦幅300px
	.value(function(d) { return d.size; });	// sizeプロパティの値をデータ値とする
// #myGraphにTreemapを描画する
d3.select("#myGraph")
	.datum(fileList)	// データを割り付け
	.selectAll("div")	// divに表示するボックスを割り当てる
	.data(treemap.nodes)	// Treemapのノードを対象に処理
	.enter()
	.append("div")	// div要素を追加
	.style("left", function(d) { return d.x + "px"; })	// 表示する座標と幅などを設定
	.style("top", function(d) { return d.y + "px"; })
	.style("width", function(d) { return d.dx + "px"; })
	.style("height", function(d) { return d.dy + "px"; })
	.style("background-color", "#ddd")
	.style("position", "absolute")
	.style("overflow", "hidden")
	.style("border", "solid 2px white")
	.text(function(d) { return d.name; })		// 文字を表示する
	.on("mouseover", function(d){	// マウスオーバー時のイベントを設定する
		d3.select(this)
			.transition()
			.style("background-color", "red")
	})
	.on("mouseout", function(d){	// マウスアウト時のイベントを設定する
		d3.select(this)
		.transition()
		.style("background-color", "#ddd")
	});