d3ズーム変換に問題があります。エラー：[ts]プロパティ '翻訳'がタイプ 'イベント'に存在しませんBaseEvent '

Question

私はズームを追加しようとしていますが、悲惨に失敗しています。私は、ズーム用のコンテナを持っています。

 this.container = svg.append("g"); 

と、この：

 var zoom = d3.behavior.zoom() 
      .scaleExtent([1, 10]) 
      .on("zoom", function() { 
       alert("here") 
       this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")") 
       alert("here 2"); 
      }); 

と、このコール：

 .call(zoom); 

一部を変換... this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")") ... は私を引き起こしています問題。それは私にこのエラーを与える：[ts] Property 'translate' does not exist on type 'Event | BaseEvent'。コンパイルされません。

私は(<any>d3.event).translateと(<any>d3.event).scaleに、または(<any>d3).event.translateと(<any>d3).event.scaleにd3.event.translateとd3.event.scaleを変更すると、エラーが表示されなくなりますが、ズームは動作しません。

これらの<any>の変更が組み込まれているため、マウスまたはスクロール（初めて）をダブルクリックすると、最初の警告が表示されます。私は第二の警告にそれをすることはありません。

問題はこの行にあると確信しています：this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")。どうすれば修正できますか？

私はPowerScriptのカスタムビジュアルを構築するためにTypeScriptとd3 v3.5.5を使用しています。

ありがとうございます！

Answer 1

私はそれを理解しました。

ビジュアルのクラスの始めに...「エクスポートクラス[ビジュアルの名前（例：scatterChart）]がIVisual {"：

を実装している部分の後ろにこれを追加しました。

 private container: d3.Selection<SVGElement>; 

私はラッパーとして「コンストラクタ」でこれを追加しました：

 this.container = svg.append("g"); 

これの残りの部分は、私は「更新」に入れます。

これは、私は信じて、「リスナー」と呼ばれる：

 var zoom = d3.behavior.zoom() 
      .scaleExtent([1, 10]) 
      .on("zoom", this.zoomed.bind(this)); 

ここでズームインする呼び出しです。

 this.svg.call(zoom); 

そして、これはズームとパンを行います「ズーム」機能、である：。

private zoomed() { 
     this.container.attr("transform", "translate(" + ((<any>d3.event).translate) + ")scale(" + ((<any>d3.event).scale) + ")");} 

あなたが、私はまだ基​​本的に私は問題だと思った同じ行（this.container.attr("transform", "translate(" + ((<any>d3.event).translate) + ")scale(" + ((<any>d3.event).scale) + ")");を使用見ることができますこれは、 実際のの問題は、zoomedへの呼び出しで.bind(this)を追加する必要があることでした。