Old school D3 from simpler times

All examples By author By category About

qingwufong

Full window Github gist

simple zoom example

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js">></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
<script>

var width  = 400;	//SVG绘制区域的宽度
var height = 400;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性
			
var circles = [ { cx: 150, cy:200, r:30 },
				{ cx: 220, cy:200, r:30 },
				{ cx: 150, cy:270, r:30 },
				{ cx: 220, cy:270, r:30 }];
		
var zoom = d3.behavior.zoom()		//创建一个缩放行为
			.scaleExtent([1, 10])	//设置缩放的范围
			.on("zoom", function(d){
				console.log(d3.event);
				d3.select(this).attr("transform", 
					"translate(" + d3.event.translate + ")" +	//平移量
					"scale(" + d3.event.scale + ")");	//缩放量
			});
		
var g = svg.append("g")
						.call(zoom);
		
g.selectAll("circle")
		.data(circles)
		.enter()
		.append("circle")
		.attr("cx",function(d){ return d.cx; })
		.attr("cy",function(d){ return d.cy; })
		.attr("r",function(d){ return d.r; })
		.attr("fill","black");
					
	
</script> 
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js