带重置功能的D3js缩放
带重置功能的D3js缩放
提问于 2018-06-07 07:59:27
我正在为一个项目使用D3js，需要缩放功能和重置缩放的能力。我的问题是，缩放功能就好像重置从未发生过一样。下面是我的代码：
function load() {
var svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%");
var zoom = d3.zoom().on("zoom", function() {
d3.select("#vis").attr("transform", d3.event.transform);
});
var vis = svg.call(zoom).append("g").attr("id", "vis");
d3.select("body").on("keypress", function() {
if (d3.event.shiftKey) {
if (d3.event.key == "R") {
vis.transition().duration(500).attr("transform", d3.zoomIdentity);
}
}
});
vis.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100);
}下面是这个问题的一个运行示例：http://bl.ocks.org/nicmcd/a74b0bfba61f50d932dedd6534ad7d9e
如何获得重置操作以重置缩放功能的内部状态，以便将来的事件将基于重置状态？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 15:23:43
我的代码有两个问题。首先，过渡需要来自svg而不是vis。其次，重置转换不能使用attr()手动完成，必须使用call()完成。下面是修改后的代码：
function load() {
var svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%");
var zoom = d3.zoom().on("zoom", function() {
vis.attr("transform", d3.event.transform);
});
var vis = svg.append("g").attr("id", "vis");
svg.call(zoom);
d3.select("body").on("keypress", function() {
svg.transition().duration(500).attr("transform", d3.zoomIdentity)
});
vis.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100);
}下面是一个有效的示例：http://bl.ocks.org/nicmcd/4c730aa64c04bf100a58f224b90c2ff4
感谢Andrew Reid指出错误。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50731239
复制相关文章
相似问题