Power BIビジュアルにd3ズームとパンを追加するにはどうすればよいですか？

Question

私はパワーBI散布図ビジュアルを持っており、d3ズームとパンを追加したいと思っています。 d3を使用してズームとパンを追加するという単純な例をすべて見てきましたが、Power BI固有のものはありません。それらはすべてhtmlの例であるように見えますが、私はそれらをPower BIのtypescriptビジュアルに翻訳するのに問題があります。私は例のどの部分がどこに行かなければならないのか分かりません。例えば、 （もしあれば）は、コードの更新領域に対してコンストラクタ領域に入るべきです。

私のコンストラクタがあります：私は考えていた

 constructor(options: VisualConstructorOptions) { 
     this.host = options.host; 
     this.selectionManager = options.host.createSelectionManager(); 
     this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, options.element); 

     let svg = this.svg = d3.select(options.element) 
      .append('svg') 
      .classed('scatterChart', true); 

     this.plotContainer = svg.append('g') 
      .classed('plotContainer', true); 

     this.xAxis = svg.append('g') 
      .classed('xAxis', true); 

     this.yAxis = svg.append('g') 
      .classed('yAxis', true); 
    } 

私はthis.svgまたはthis.plotContainerのいずれかにズームを結ぶ必要があると思います。しかし、私が前提とすると、コンストラクタで、または後でコード内で行うべきですか？更新エリアでは？私はズームがアクティブなイベントによってトリガされることを想像し、そのようなものは通常対処されている場所なので、私はほとんど更新エリアでそれを試みました。

私は、彼らがあるべき思いすべての部分で、様々な例に置くしようとしたとき、コンパイラは常に機能にチョーク：

function zoomed() { 
    this.plotContainer.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 

それはd3.event.translateかが好きではありません。 d3.event.scale。

私は本当に失われており、間違いなくあなたの助けを使うことができました！

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) + ")");}