Question

所以我希望能够缩放一个东西（我的比例）和一个东西（我的滑块），以便当我2005年4月的滑块停留在2005年4月时，即使它是缩放比例从更广泛的角度来看（比如从显示2005年到显示2000-2010），缩放比例缩小，滑块（顺便说一下是刷子）按比例放大。

我的问题与Brush and Zoom example之间的区别是我希望下面的比例改变，它上面的图形保持不变，并且刷子按比例改变比例变化。

我的问题是我用来缩放的event.transform对象，它给了我一个K值和一个X值，我无法弄清楚如何进行逆向工程，有什么方法可以解决这个问题吗？

由于有人想要查看一些代码：

function zoomScale() {
            let t = d3.event.transform;

            if(t) {
                xScale1.domain(t.rescaleX(xScale2).domain());
                context.select(".axis--x").call(xAxis2);
                context.select(".brush").call(brush.move, xScale2.range().map(t.invertX, t));
            }

        }

这使得比例更大，刷子更大，我希望刷子按比例缩小到比例大小。

Answer 1

好的，所以我终于明白了。每次在比例尺上进行选择时，都将其保存为变量，就像我的案例latestBrushDateSelection一样。您还需要一个新的TimeScale来保存轴的原始域，在我的情况下是xScale3。然后缩放功能将如下所示：

function zoomChart() {
            const t = d3.event.transform

            xScale2.domain(t.rescaleX(xScale3).domain())
            context.select('.axis--x').call(xAxis2)
            context.select('.brush').call(brush.move, latestBrushDateSelection.map(d => xScale2(d)))

        }

我希望能够按比例同时放大和缩小

1 个答案: