欢迎使用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);