【D3.js】クリックした位置の緯度経度を求める

小ネタ。

pixel座標と緯度経度の変換を行います。

サンプル

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

function d3main(json){

	var geodata = topojson.object(json, json.objects.japan).geometries;

	projection = d3.geo
		.mercator()		//投影法の指定
		.scale(1500)	//スケール（ズーム）の指定
		.translate([300,350])
		.center([139.0032936, 36.3219088]); //中心の座標を指定

	var path = d3.geo.path().projection(projection);　//投影

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

	var map =  svg.append("svg:g")
		.selectAll("path")
		.data(geodata)
		.enter()
		.append("svg:path")
		.attr({
			"d": D(path),
			"fill": "green",
			"fill-opacity": 0.5,
			"stroke": "black"
		});
		
	//クリックした位置の緯度経度を取得	
	d3.select("svg").on("mousedown.log", function() {
		d3.select('.resllut').text("results:" + projection.invert(d3.mouse(this)));
	});
}

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

d3main(json);

});

function d3main(json){

var geodata = topojson.object(json, json.objects.japan).geometries;

projection = d3.geo

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

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

.translate([300,350])

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

var path = d3.geo.path().projection(projection);　//投影

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

var map = svg.append("svg:g")

.selectAll("path")

.data(geodata)

.enter()

.append("svg:path")

.attr({

"d": D(path),

"fill": "green",

"fill-opacity": 0.5,

"stroke": "black"

});

//クリックした位置の緯度経度を取得

d3.select("svg").on("mousedown.log", function() {

d3.select('.resllut').text("results:" + projection.invert(d3.mouse(this)));

});

}

サンプル

投稿者: shimizu