私はパワーBI散布図ビジュアルを持っており、d3ズームとパンを追加したいと思っています。 d3を使用してズームとパンを追加するという単純な例をすべて見てきましたが、Power BI固有のものはありません。それらはすべてhtmlの例であるように見えますが、私はそれらをPower BIのtypescriptビジュアルに翻訳するのに問題があります。私は例のどの部分がどこに行かなければならないのか分かりません。例えば、 (もしあれば)は、コードの更新領域に対してコンストラクタ領域に入るべきです。Power BIビジュアルにd3ズームとパンを追加するにはどうすればよいですか?
私のコンストラクタがあります:私は考えていた
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
。
私は本当に失われており、間違いなくあなたの助けを使うことができました!