手動ズームでd3エラー

Question

私はd3 v4を使用しています。

私は次のように領域グラフをズームしています：example私のズームは、このようなとして登録されている：

は

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

自然ホイールでズーム、consoleが吐き出す：

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

私は私のズーム方式は、このように見ていると

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

私はTimeScaleを使用していて、ズームインして一定の時間に翻訳したいと思っています。たとえば、私はx1とx2として7日間を表示したいだけなので、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であり、タッチデバイスのズームインを停止します。 zoom.translateBy()にそれを供給するためにtyをどうすれば計算できますか？

ここにはjsFiddleが含まれています。

Answer 1

x軸（zoomed関数内）のトランスフォームリスケールのみを使用するので、tyの値は気にしません。ただ、translateByに値を渡し、それがNaNではありませんし、それが動作します：

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

tyはあなたのコードとNaNあるのはなぜ？

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として評価されます：zoom.translateByは、そのsource codeがあり、transform.translate関数を呼び出します。