相关疑难解决方法(0)

d3:火灾缩放事件(或模拟缩放事件)

当我用鼠标缩放时,将执行以下函数"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.如果以编程方式修改了比例的域,则应将其重新分配给缩放行为.

我需要以编程方式进行缩放(可能使用缩放按钮).如何触发缩放事件,以便自动重新计算轴的比例?

javascript javascript-events d3.js

5
推荐指数
2
解决办法
6229
查看次数

d3-drag - 在 d3v5 中拖动重新调整 y 轴

当用户沿轴拖动时,我试图实现重新缩放 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)

d3.js d3fc

5
推荐指数
1
解决办法
382
查看次数

标签 统计

d3.js ×2

d3fc ×1

javascript ×1

javascript-events ×1