1

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

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

4

1 回答 1

0

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

Acanvas (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();
于 2013-10-29T15:57:01.203 回答