【D3.js】各県の境界線ボックスを描画する

各県が収まるサイズのBOXを描画します。

サンプル

.elmenthover {
	stroke: blue;
	stroke-width:3;
	fill: blue;
}

.tooltip {
  border: 1px solid black;
  background-color: white;
  padding: 5px 8px 4px 8px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.elmenthover {

stroke: blue;

stroke-width:3;

fill: blue;

}

.tooltip {

border: 1px solid black;

background-color: white;

padding: 5px 8px 4px 8px;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

}

d3.json("japan.topojson", function(json){
	d3draw(json);
});

function d3draw(json) {

	//ツールチップ要素の追加
	var tooltip = d3.select("body")
		.append("div")
		.attr("class", "tooltip")
		.style("position", "absolute")
		.style("z-index", "10")
		.style("visibility", "hidden");
		
	
	var geodata = json.objects.japan;
	var feature = topojson.feature(json, geodata).features;

	var projection = d3.geo
		.mercator()		//投影法の指定
		.scale(2000)	//スケール（ズーム）の指定
		.translate([500 , 500]) //表示位置調整
		.center([139.0032936, 36.3219088]); //中心の座標を指定

	var path = d3.geo.path().projection(projection);　//パスジェネレーター
	
	
	var svg = d3.select('svg');

	//地形の描画
	var land = svg.selectAll('.land')
		.data(feature)
		.enter()
		.append('path')
		.attr({
			"class": function(d){ return d.properties.PREF },
			"d": path,
			"stroke": "white",
			"fill": "#ccc"
		});

	//境界情報の取得
	var drawBounds = function(d){
			var b = path.bounds(d);
			return "M" + b[0] + "H" + b[1][0] + "V" + b[1][1] + "H" + b[0][0] + "Z";
		}

	//境界BOXの描画
	var bounds = svg.selectAll('.bounds')
		.data(feature)
		.enter()
		.append('path')
		.attr({
			"class": function(d){ return d.properties.PREF },
			"d": drawBounds,
			"stroke": "red",
			"fill-opacity": 0
		})
		.on("mouseover", function(d) {
			tooltip.style("visibility", "visible");
			currentClass = d3.select(this).attr("class");
			d3.selectAll("."+currentClass).classed("elmenthover", true);
		})
		.on("mouseout", function(d) {
			tooltip.style("visibility", "hidden");		
			d3.selectAll("path").classed("elmenthover", false);			
		})
		.on("mousemove", function(d){
			var content = "<center>"+d.properties.PREF+"</center><br/>";
			tooltip
			 .style("top", (d3.event.pageY-10)+"px")
			 .style("left",(d3.event.pageX+10)+"px")
			 .html(content);
		});

	
	//ズームイベント設定    
	var zoom = d3.behavior.zoom().on('zoom', function(){
	   projection.scale(3000 * d3.event.scale);       
	   land.attr('d', path);       
	   bounds.attr('d', drawBounds); 
	});
	svg.call(zoom);	 
		
	//ドラッグイベント設定
	var drag = d3.behavior.drag().on('drag', function(){
		   var tl = projection.translate();
			projection.translate([tl[0] + d3.event.dx, tl[1] + d3.event.dy]);
			land.attr('d', path);       
			bounds.attr('d', drawBounds);       
		});
	svg.call(drag);

		
}

d3.json("japan.topojson", function(json){

d3draw(json);

});

function d3draw(json) {

//ツールチップ要素の追加

var tooltip = d3.select("body")

.append("div")

.attr("class", "tooltip")

.style("position", "absolute")

.style("z-index", "10")

.style("visibility", "hidden");

var geodata = json.objects.japan;

var feature = topojson.feature(json, geodata).features;

var projection = d3.geo

.mercator() //投影法の指定

.scale(2000) //スケール（ズーム）の指定

.translate([500 , 500]) //表示位置調整

.center([139.0032936, 36.3219088]); //中心の座標を指定

var path = d3.geo.path().projection(projection);　//パスジェネレーター

var svg = d3.select('svg');

//地形の描画

var land = svg.selectAll('.land')

.data(feature)

.enter()

.append('path')

.attr({

"class": function(d){ return d.properties.PREF },

"d": path,

"stroke": "white",

"fill": "#ccc"

});

//境界情報の取得

var drawBounds = function(d){

var b = path.bounds(d);

return "M" + b[0] + "H" + b[1][0] + "V" + b[1][1] + "H" + b[0][0] + "Z";

}

//境界BOXの描画

var bounds = svg.selectAll('.bounds')

.data(feature)

.enter()

.append('path')

.attr({

"class": function(d){ return d.properties.PREF },

"d": drawBounds,

"stroke": "red",

"fill-opacity": 0

})

.on("mouseover", function(d) {

tooltip.style("visibility", "visible");

currentClass = d3.select(this).attr("class");

d3.selectAll("."+currentClass).classed("elmenthover", true);

})

.on("mouseout", function(d) {

tooltip.style("visibility", "hidden");

d3.selectAll("path").classed("elmenthover", false);

})

.on("mousemove", function(d){

var content = "<center>"+d.properties.PREF+"</center><br/>";

tooltip

.style("top", (d3.event.pageY-10)+"px")

.style("left",(d3.event.pageX+10)+"px")

.html(content);

});

//ズームイベント設定

var zoom = d3.behavior.zoom().on('zoom', function(){

projection.scale(3000 * d3.event.scale);

land.attr('d', path);

bounds.attr('d', drawBounds);

});

svg.call(zoom);

//ドラッグイベント設定

var drag = d3.behavior.drag().on('drag', function(){

var tl = projection.translate();

projection.translate([tl[0] + d3.event.dx, tl[1] + d3.event.dy]);

land.attr('d', path);

bounds.attr('d', drawBounds);

});

svg.call(drag);

}

サンプル

投稿者: shimizu