Built with blockbuilder.org
xxxxxxxxxx
<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