使用鼠标在窗口中的任意位置缩放/平移 D3答案

【问题标题】：Zoom/pan in D3 with mouse anywhere in window使用鼠标在窗口中的任意位置缩放/平移 D3
【发布时间】：2013-07-24 19:47:13
【问题描述】：

我正在玩 D3 中的地图。现在我只显示了美国，并且我已经实现了一些缩放和平移功能。我的问题是：是否可以允许用户从任何点缩放/平移？也就是说，只有当鼠标直接位于地图的一部分或任何其他 svg 元素（即不是空白）上时，您才能进行缩放或平移。我可以将其扩展到整个窗口吗？我之前通过添加一个可以注册事件的巨大背景矩形来完成此操作，但这感觉有点hacky，我觉得有更好的方法。感谢您的建议！

编辑：看起来我不小心弄出了一些示例代码：p

【问题讨论】：

您是否尝试过调用 SVG 本身的缩放行为？
即使您不在 SVG 上，是否也希望注册鼠标事件？
嗯，我回去玩一些我在其他地方看到的示例代码，并让它以某种方式工作：o 看起来我在那里的一些其他代码否定了它或其他东西。不过，感谢您的回复！ :)

标签： svg d3.js zooming pan

【解决方案1】：

这是我为了解 D3.js 中最基本的缩放行为而制作的示例

canvas (svg) 被附加到 HTML 的正文中。然后附加一个蓝色矩形，然后附加一个红色矩形。缩放行为与线条一起添加

.call(d3.behavior.zoom().on("zoom",redraw))

这里当 D3 检测到画布上触发了“缩放”时调用了重绘函数。

代码示例在 javaScript 中的“类”对象中调用：

function ExampleZoom(){
/*** Class defining a zoomable svg. SVG AKA canvas in HTML5 ***/
var self = this;

self.margin = {top: 20, right: 20, bottom: 30, left: 40};
self.width = 960 - self.margin.left - self.margin.right;
self.height = 500 - self.margin.top - self.margin.bottom;

self.svg = d3.select("body").append("svg:svg")
            .attr("width", self.width)
            .attr("height", self.height)
            .call(d3.behavior.zoom().on("zoom",redraw))
            .append("g")
            .attr("transform", "translate(" + self.margin.left + "," + self.margin.top + ")");

self.svg.append("svg:rect")
    .attr("width",40)
    .attr("height", 40)
    .attr("y", 100)
    .attr("x", 100)
    .style("fill", "steelblue");

self.svg.append("svg:rect")
    .attr("width",10)
    .attr("height", 10)
    .attr("y", 200)
    .attr("x", 200)
    .style("fill", "red");

//Redraw for zoom
function redraw() {
    console.log("here", d3.event.translate, d3.event.scale);
    self.svg.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
}//End of class

var ex = new ExampleZoom();

【讨论】：