第一次缩放事件移除中心变换。
第一次缩放事件移除中心变换。
提问于 2018-06-05 08:19:24
我有一棵像这样的“径向蒂迪树”：https://bl.ocks.org/mbostock/4063550
我试图增加缩放和摇摄，但我无法使缩放和摇摄工作正常。
我的代码如下所示：
var width = 1000,
height = 800;
var zoom = d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed);
var svg = d3.select('.svg-container').append("svg")
.attr("width", width)
.attr("height", height)
.attr('preserveAspectRatio', 'xMinYMin')
.call(zoom);
var g = svg.append("g").attr(
"transform",
"translate(" + width / 2 + "," + height / 2 + ") scale(1)"
);
function zoomed() {
g.attr(
"transform",
d3.event.transform
);
}当我第一次拖动或滚动时， g 元素跳到左上角的。第一个d3.event.transform输出如下：
{k: 1, x: 0, y: 0}如果我在那之后放大或平移，它就可以正常工作了。
当我尝试这个：
function zoomed() {
var x = (width / 2) + d3.event.transform.x;
var y = (height / 2) + d3.event.transform.y;
g.attr(
"transform",
"translate(" + x + "," + y + ") scale(" + d3.event.transform.k + ")"
);
}G元素不会跳转到左上角，平移操作也很好，但是缩放不会根据鼠标的位置进行缩放(只有当鼠标位于左上角时才能正确工作)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-05 11:45:30
由于d3在元素本身上存储一个缩放元素，所以它需要了解所有将成为缩放的一部分的转换。在您的例子中，您已经通过一个.attr调用(而不是缩放)设置了初始位置，因此d3不知道它。若要通过缩放设置它，请执行以下操作：
var width = 1000,
height = 800;
var zoom = d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed);
var svg = d3.select('.svg-container').append("svg")
.attr("width", width)
.attr("height", height)
.attr('preserveAspectRatio', 'xMinYMin')
.call(zoom);
var g = svg.append("g");
// set initial position via zoom
svg.call(zoom.transform, d3.zoomIdentity.translate(width/2, height/2));
function zoomed() {
g.attr(
"transform",
d3.event.transform
);
}工作示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50695396
复制相关文章
相似问题
腾讯云开发者
