本文实例为大家分享了d3.js实现图形缩放平移的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>缩放操作& lt;/title>
& lt;/head>
& lt; body>
& lt;脚本src=" https://www.yisu.com/zixun/d3.js "祝辞& lt;/script>
& lt; script>
var宽度=400,
身高=400;
var圆=[{残雪:150年,cy: 200年,r: 30},
{残雪:250年,cy: 200年,r: 30}]
svg var=d3.select(身体).append (svg)
.attr(“宽度”,宽度)
.attr(“高度”,高度)//定义缩放函数
var变焦=d3.behavior.zoom ()
.scaleExtent([10])//用于设置最小和最大的缩放比例
内(“放大”,放大)//绘制
var g=svg.append (“g”)
打电话给(放大)
g.selectAll(“圈”)
. data(圆)
.enter ()
.append(“圈”)
.attr (“cx”,函数(d) {
返回d.cx
}）
.attr (cy,函数(d) {
返回d.cy
}）
.attr (“r”、功能(d) {
返回d.r
}）
.attr(“填满”,“黑”)
函数缩放(){
g.attr(“变换”、“翻译(“+ d3.event.translate +”) (“+ d3.event.scale +”)“规模)
}//d3.event。翻译是平移的坐标值,d3.event。规模是缩放的值。
& lt;/script>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
