d3.js - 以编程方式缩放后使用鼠标滚轮时 D3.zoom 跳转
问题描述
当我单击鼠标缩放到特定位置然后尝试平移或使用鼠标滚轮时,缩放行为会跳跃。似乎我的缩放级别正在恢复,就像单击鼠标之前一样。
这是我的事件处理程序:
function click(d) {
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
svgContainer.transition()
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")");
}
这就是我“激活”缩放和平移功能的方式。
var svgContainer = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.zoom().on("zoom", function () {
svgContainer.attr("transform", d3.event.transform)
}))
.append("g")
...
svgContainer.selectAll(null)
.data(feat.features)
.enter()
.append("path")
.on("click", click)
...
解决方案
背景
您正在操作单击功能中应用于元素的变换,但没有更新缩放状态以反映这一点。d3.zoom 根本不跟踪元素的变换。因此,当您独立于 d3.zoom 修改元素的变换属性时,d3.zoom 不再“知道”该元素的变换是什么——它保持不变。D3.zoom 确实跟踪缩放状态 - 在内部并且独立于任何元素的变换属性。
d3.zoom 不跟踪元素的变换可能看起来很奇怪,但这是有充分理由的。d3.zoom 并不总是用于操纵元素的变换,它可能会改变元素宽度或比例等内容,而该元素的变换保持不变。这是我的一个块,这里的d3.zoom仅操纵画布上的圆的半径。
问题
由于您没有在单击事件中更新缩放状态,因此 d3.zoom 会在应用新的缩放事件时拾取上次离开的位置,这解释了您的症状:“似乎我的缩放级别像在鼠标点击。”
解决方案
那么,你需要做什么?您需要将缩放转换传递给 d3.zoom 并触发缩放事件。这样 d3.zoom 就可以获知当前的缩放状态。幸运的是,有一种方法可以做到这一点。我们采用 d3.zoomIdentity (k=1,x=0,y=0) 并根据需要进行平移和缩放,我们也可以像您所做的那样平移、缩放然后再次平移:
// Create a zoom transform from d3.zoomIdentity
var transform = d3.zoomIdentity
.translate(250,150)
.scale(k)
.translate(-x,-y);
然后我们根据文档调用 zoom.transform 来应用缩放:
将选定元素的当前缩放变换设置为指定的变换,立即发出开始、缩放和结束事件。如果 selection 是一个转换,则使用 d3.interpolateZoom 定义一个“缩放”补间到指定转换,在转换开始时发出一个开始事件,为转换的每个刻度发出缩放事件,然后在转换结束时发出一个结束事件(或被中断)。(链接)
我们可以调用 zoom.transform :
// Apply the zoom and trigger a zoom event with a provided zoom transform:
svg.call(zoom.transform, transform);
因此,如果这与您所拥有的相似:
var zoom = d3.zoom()
.scaleExtent([1,8])
.translateExtent([[0,0],[500,300]])
.on("zoom",zoomed);
var svg = d3.select("div")
.append("svg")
.attr("width",500)
.attr("height",300)
.call(zoom);
var g = svg.append("g");
var rects = g.selectAll(null)
.data(d3.range(750))
.enter()
.append("rect")
.attr("width",17)
.attr("height",17)
.attr("fill","#eee")
.attr("y", function(d) { return Math.floor(d/50) * 20; })
.attr("x", function(d) { return d%50 * 20; })
.on("click", click);
function zoomed() {
g.attr("transform", d3.event.transform);
}
function click(d) {
rects.attr("fill","#eee");
var clicked = d3.select(this);
clicked.attr("fill","orange");
var x = +clicked.attr("x")+10;
var y = +clicked.attr("y")+10;
var k = 5;
var transform = "translate(" + 250 + "," + 150 + ")scale(" + k + ")translate(" + -x + "," + -y + ")";
g.transition()
.attr("transform",transform)
.duration(1000);
}
rect {
stroke-width: 1px;
stroke: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div>
这可能类似于您的解决方案:
var zoom = d3.zoom()
.scaleExtent([1,8])
.translateExtent([[0,0],[500,300]])
.on("zoom",zoomed);
var svg = d3.select("div")
.append("svg")
.attr("width",500)
.attr("height",300)
.call(zoom);
var g = svg.append("g");
var rects = g.selectAll(null)
.data(d3.range(750))
.enter()
.append("rect")
.attr("width",17)
.attr("height",17)
.attr("fill","#eee")
.attr("y", function(d) { return Math.floor(d/50) * 20; })
.attr("x", function(d) { return d%50 * 20; })
.on("click", click);
function zoomed() {
g.attr("transform", d3.event.transform);
}
function click(d) {
rects.attr("fill","#eee");
var clicked = d3.select(this);
clicked.attr("fill","orange");
var x = +clicked.attr("x")+10;
var y = +clicked.attr("y")+10;
var k = 5;
// Create a zoom transform from d3.zoomIdentity
var transform = d3.zoomIdentity
.translate(250,150)
.scale(k)
.translate(-x,-y);
// Apply the zoom and trigger a zoom event:
svg.call(zoom.transform, transform);
}
rect {
stroke-width: 1px;
stroke: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div>
推荐阅读
- grpc - 具有多线程客户端的 gRPC 双向流处理
- mongodb - 数组大小 gt 0 的匹配操作在聚合 MongoDB 中不起作用
- javascript - 悬停在标记上时不要更改鼠标图标
- python - 如何在 Python 中使用 matplotlib 优雅地绘制大量子图?
- mongodb - 如何重新组合展开的文档?
- python - 如何在熊猫数据框列中同质化日期类型?
- c# - 将变量从视图传递到控制器
- c# - MVC .net 核心:Validator.TryValidateObject 不验证属性,在伙伴类中定义
- python - Django 中的更新表单必须更新对象的所有字段吗?
- python - 使用python请求登录github