d3手动变焦错误

我正在使用以下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 
}

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

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。

来源

2016-12-01 inspired

你可以给一个工作小提琴.. – Cyril

是让我把一个在一起。 – inspired

@Cyril。我已经添加了一个JsFiddle – inspired

由于您只使用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评估。

来源

2016-12-04 20:38:51 etiennecrb

我不知道我是如何忽略这一点的，但是我使用了带有Ionic 2/Angular 2的d3，并且做了一些非常复杂的图形，所以我猜测复杂性会降低。非常感谢！ – inspired

d3手动变焦错误

回答

相关问题