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。

d3手动变焦错误

1 个答案: