我目前在 Mike Bostock 的工作画笔和缩放 https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172例如，尽管我没有在 svg 上覆盖矩形对象，而是将其附加到我的图表上，以便我仍然可以使用鼠标悬停事件等。
我在结合画笔和缩放功能时遇到了很大困难。两者都工作正常，但不“记住”它们当前的状态。例如，如果我要平移/调整画笔大小，缩放一切都很好，但如果我随后使用鼠标/触摸板事件进行缩放，它会沿着画笔跳跃并完全丢失我在图表中的位置。
我如何让缩放“记住”它在画笔视口中的位置，并流畅地工作？
function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;
var selection = d3.event.selection;
x.domain(selection.map(x2.invert, x2));
focus.selectAll(".point")
.attr("cx", function(d){
var time = timeParser(d.timestamp);
return x(time);
})
.attr("cy", function(d){
return y(d.value);
});
focus.selectAll(".trendline")
.attr("d", function(d){
return line(d);
});
focus.selectAll(".area")
.attr("d", function(d){
return area(d);
});
focus.select(".axis.x").call(xAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (selection[1] - selection[0]))
.translate(-selection[0], 0));
}
function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return;
var t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
focus.selectAll(".point")
.attr("cx", function(d){
var time = timeParser(d.timestamp);
return x(time);
})
.attr("cy", function(d){
return y(d.value);
});
focus.selectAll(".trendline")
.attr("d", function(d){
return line(d);
});
focus.selectAll(".area")
.attr("d", function(d){
return area(d);
});
focus.select(".axis.x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}
下面的图表给出了一种粗略的想法：
您已删除示例中用于缩放图表的矩形，但尚未替换其所有功能。
当你打电话时zoom在某些其他元素（大概是您的面积图）上，您在此处刷牙时不会更新该缩放：
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (selection[1] - selection[0]))
.translate(-selection[0], 0));
您需要为图表分配缩放类别，否则这是一个空选择（或不相关元素的选择）。如果不这样做，画笔更改不会修改缩放比例并平移，这意味着画笔然后缩放将导致“沿着画笔跳跃”，从而丢失您所在的位置。
通过这一更改，您应该能够使其正常工作：example https://bl.ocks.org/andrew-reid/33ed41fa918af88de8b447da3786de0f.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
