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手動變焦錯誤

回答

相關問題