d3 手动缩放错误

Question

我正在使用 d3 v4。

我正在使用以下example 对面积图进行缩放。我的缩放是这样注册的：

    // Zoom Components
    zoom = d3.zoom()
            .scaleExtent([1, dayDiff*12])
            .translateExtent([[0, 0], [width, height]])
            .extent([[0, 0], [width, height]])
            .on("zoom", zoomed);

我的缩放方法如下所示：

function zoomed(){
    t = d3.event.transform;
    console.log(t);
    ...
}

当使用滚轮自然缩放时，console 会吐出：

{
    k:1.0097512975966858
    x:-1.9210056265470996
    y:-1.004383652458642
}

我正在使用TimeScale，我想放大并转换到某个时间段。例如，我可能只想将 7 天显示为我的 x1 和 x2，所以我计算 k 的比例因子，然后计算 tx 值以转换为某个区域。一世 创建了手动缩放方法来触发手动缩放。使用以下代码：

function manualZoom(){
    var outerRightDay,
        thirtyBeforeOuter,
        k,
        tx;
        // Get outer right day
        outerRightDay = moment(xScale.domain()[1]);
        // Get 30 days before
        thirtyBeforeOuter = moment(outerRightDay).subtract(31,'days');
        // Get scale k
        k = width / (xScale(outerRightDay) - xScale(thirtyBeforeOuter));
        // Get transform value

        svg.call(zoom.scaleBy, k);
        tx = 0 - k * xScale(thirtyBeforeOuter);
        svg.call(zoom.translateBy,tx);
}

运行这个之后，缩放的方法吐出来了：

{
    k:1.0097512975966858 //a good number
    x:-1.9210056265470996 //a good number
    y:NAN //this is an issue!!!!
}

它适用于鼠标滚轮，在触摸设备上购买。我的y 是NAN 并阻止我放大触摸设备。我如何计算ty 以将其提供给zoom.translateBy()。

我在这里添加了jsFiddle。

Answer 1

由于您仅在 x 轴上使用变换重缩放（在 zoomed 函数中），因此您不必关心 ty 的值。只需将值传递给translateBy，它不会是NaN，它会起作用：

svg.call(zoom.translateBy,tx,0);

为什么ty 是NaN 与您的代码？ zoom.translateBy 调用transform.translate 函数，其source code 是：

translate: function(x, y) {
  return x === 0 & y === 0 ? this : new Transform(this.k, this.x + this.k * x, this.y + this.k * y);
}

所以如果y 是undefined，this.y + this.k * y 将被评估为NaN。