欢迎使用CSDN-markdown编辑器

d3.js的缩放操作

以下代码就可以将图表设置为可缩放平移

var svg = d3.select(document.getElementById("canvas"));var g = svg.append('g').attr("transform", "translate(0, 0) scale(1)");// 定义一个zoom对象，并设置缩放移动时执行的方法var zoom = d3.zoom()    .scaleExtent([1 / 2, 8])// 设置缩放区间范围    .on("zoom", function () {        g.attr("transform", d3.event.transform);    });// 将zoom对象和svg绑定svg.call(zoom);

zoom可供绑定的事件有三种：

• start - 开始缩放 (比如鼠标按下).
• zoom - 开始缩放变换(比如拖拽).
• end - 缩放结束(比如鼠标抬起 ).

zoom对象默认开启双击放大事件，一下代码可以禁止双击放大事件

svg.call(zoom).on("dblclick.zoom", null);

---

以下代码为外部绑定的方法将图表缩放平移还原。以下两行代码任意一行皆可

// 因为zoom是绑定在svg上的，所以还原时所设置的对象也必须是svg//（绑定在g上虽然也能重置，但是下一次进行缩放平移时的基础位置会是上一次缩放平移的结果）zoom.transform(svg, d3.zoomIdentity);svg.call(zoom.transform, d3.zoomIdentity);// d3.zoomIdentity为d3缩放平移对象的默认初始化值 k = 1, tx = ty = 0.// 设置自定义值var t = d3.zoomIdentity.translate(x, y).scale(k);svg.call(zoom.transform, t);