如何將d3縮放和平移添加到Power BI可視化中？

我有一個Power BI散點圖可視化，我想添加d3縮放和平移。我已經看到了使用d3添加縮放和平移的各種簡單示例，但是它們都不是Power BI特有的。它們都是html示例，我無法將它們翻譯成Power BI typescript visual。我不確定示例的哪些部分應該放在哪裏。例如，什麼（如果有的話）應該在構造函數區域與代碼的更新區域進行比較。如何將d3縮放和平移添加到Power BI可視化中？

我的構造函數：

 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。

我真的很迷茫，絕對可以使用你的幫助！

來源

2017-03-07 Marc Pincince

我想通了。下面是對我有用的部分：

我在視覺類的開始處添加了這個......在「導出類[VISUAL'S NAME（例如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) + ")");}

來源

2017-03-17 18:49:00

如何將d3縮放和平移添加到Power BI可視化中？

回答

相關問題