【D3.js】d3.zoomオブジェクトを使って Pan/Zoon を実装する。

D3.js v4ではd３.zoomオブジェクトを使用することで、簡単にパン／ズームを実装することができます。

var w = 900;
var h = 500;

var data = d3.range(0, 100).map(function(d){
	return {"x": ~~(Math.random() * w ), "y": ~~(Math.random() * h), "r": ~~(Math.random() * 90) + 10 };
});

var svg = d3.select("svg")
	.attr("width", w)
	.attr("height", h)

//ズーム対象とするレイヤーを生成	
var zoomLayer  = svg.append("g")
	
	
//カラージェネレーター
var color = d3.scaleOrdinal(d3.schemeCategory10);



//サークルを配置
zoomLayer.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d){ return d.x })
	.attr("cy", function(d){ return d.y })
	.attr("r", function(d){ return d.r })
	.attr("fill", function(d,i){  return color(i) })
	.attr("fill-opacity", 0.5)
	

//ズーム時の処理を設定
var zoomed = function() {
  zoomLayer.attr("transform", d3.event.transform);
}

//ズームイベントをsvg要素に束縛
svg.call(d3.zoom()
	.scaleExtent([1 / 2, 12])
	.on("zoom", zoomed));

var w = 900;

var h = 500;

var data = d3.range(0, 100).map(function(d){

return {"x": ~~(Math.random() * w ), "y": ~~(Math.random() * h), "r": ~~(Math.random() * 90) + 10 };

});

var svg = d3.select("svg")

.attr("width", w)

.attr("height", h)

//ズーム対象とするレイヤーを生成

var zoomLayer = svg.append("g")

//カラージェネレーター

var color = d3.scaleOrdinal(d3.schemeCategory10);

//サークルを配置

zoomLayer.selectAll("circle")

.data(data)

.enter()

.append("circle")

.attr("cx", function(d){ return d.x })

.attr("cy", function(d){ return d.y })

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

.attr("fill", function(d,i){ return color(i) })

.attr("fill-opacity", 0.5)

//ズーム時の処理を設定

var zoomed = function() {

zoomLayer.attr("transform", d3.event.transform);

}

//ズームイベントをsvg要素に束縛

svg.call(d3.zoom()

.scaleExtent([1 / 2, 12])

.on("zoom", zoomed));

example

投稿者: shimizu