javascript - 手动缩放时出现 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);
}

运行后，zoomed 方法吐出:

{
    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.