当我用鼠标缩放时,将执行以下函数"myZoom":
myZoom.on('zoom', function() {
someElement.attr('transform', 'translate(' + d3.event.translate[0] + ',' + d3.event.translate[1] + ') scale(' + d3.event.scale + ')');
....
// redraw axes, which should stay where they are at.
....
}
Run Code Online (Sandbox Code Playgroud)
要在没有鼠标或其他指针设备的情况下模拟缩放,我只需更改上面属性'transform'的值即可.简单.
但问题是在这个函数中我实际重绘轴,其比例自动重新计算.请参阅d3中的官方文档:
zoom.y([Y])
指定y缩放,其缩放时应自动调整其域.如果未指定,则返回当前的y-scale,默认为null.如果以编程方式修改了比例的域,则应将其重新分配给缩放行为.
我需要以编程方式进行缩放(可能使用缩放按钮).如何触发缩放事件,以便自动重新计算轴的比例?
当用户沿轴拖动时,我试图实现重新缩放 d3fc 笛卡尔图的效果。
https://codepen.io/parliament718/pen/BaNQPXx
这是在 d3v5 中,我使用 d3-zoom 使用d3.event.transform. 但是,在 d3-drag 中没有,d3.event.transform所以我不明白仅使用 d3-drag 提供的鼠标坐标的等效逻辑是什么。
const zoom = d3.zoom()
.on('zoom', () => {
const t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
y.domain(t.rescaleY(y2).domain());
render();
});
plot.call(zoom);
//What is the equivelant drag action to rescale?
const yAxisDrag = d3.drag()
.on('end', (args) => {
var t = d3.zoomTransform(plot.node());
//zoom.translateBy(plot,d3.event.dx/t.k,d3.event.dy/t.k);
//How can I use zoom.scaleBy() here instead?
});
Run Code Online (Sandbox Code Playgroud)