無法通過PowerBI開發工具中的更新方法更新對象屬性

Question

我仍然是開發Power BI的初學者，並且在使用「Power BI開發工具」時遇到問題。 （https://app.powerbi.com/devTools）

問題是「我無法通過更新方法更新對象屬性」。

例如，我在主體 中創建了兩個對象，它們是「一個矩形」和「一個文本對象」。 爲了應用selectAll方法，我在矩形對象中使用了selectAll方法。 （例如，如果輸入數據點增加，它應該是更多的矩形）

在這兩個對象中，我在他們的屬性 中編寫了「++ this.count」，假設兩個對象都會更改單詞（文本對象）或寬度（矩形對象），當單擊窗口或重新調整窗口大小時。

然而，結果卻是不同的結果。 在點擊窗口或重新調整窗口大小時，文本對象的字改變了，但矩形對象的寬度沒有改變。

我想請求幫助，因爲我認爲我必須有一些概念誤解，但我不知道從哪裏開始探索更好。

誰能告訴我 （1）爲什麼只有一個對象在更新方法中更改（更新）？ （2）我的概念哪部分是錯的？

非常感謝。

以下是代碼。

---

模塊powerbi.visuals { 導出接口TESTDATA { DATE_VALUE：日期 }

export class Test implements IVisual { 
    public static capabilities: VisualCapabilities = { 
    }; 

    private element: JQuery; 
    private body: D3.Selection; 
    private Debug: D3.Selection; 
    private svg: D3.Selection; 
    private TT: D3.Selection; 
    private RR: D3.Selection; 
    private selectionManager: utility.SelectionManager; 
    private dataView: DataView; 
    private count = 0; 

    public init(options: VisualInitOptions): void { 
     var element = options.element; 
     this.body = d3.select(element.get(0)) 
      .append('div'); 
     this.TT = this.body.append('text') 
     this.svg = this.body.append('svg') 
    } 


    public update(options: VisualUpdateOptions) { 
     var width = options.viewport.width; 
     var height = options.viewport.height; 
     this.body.attr({ 'height': height, 'width': width }); 


     // Text Object 
     this.TT 
      .attr("x", 10 * ++this.count) 
      .attr("y", 10 * ++this.count) 
      .text(' width = ' + options.viewport.width + '...count = ' + + (++this.count)) 


     // Rectangle Object 
     // use d3.selectAll method --> as datapoints increases, the number of rectangles will also increase. 
     var rectangle = this.svg.selectAll("rect") 
      .data([1]); 

     rectangle.enter().append("rect") 
      .attr("y", 10) 
      .attr("x", 20) 
      .attr('width', 50 + ((++this.count))) 
      .attr('height', 100) 
      .attr('fill', 'red') 

     rectangle.exit().remove() 
    } 
} 

}

Answer 1

只設置了矩形的寬/高在D3進入事件，這是當它第一次被添加到頁面。查看enter selection code example，其中顯示如何更新新節點和現有節點（它是退出事件之前的最後一個節點）。

所以，你需要改變你的代碼輸入到做這樣的事情：

var rectangle = this.svg.selectAll("rect") 
      .data([1]); 

rectangle.enter().append("rect") 
      .attr("y", 10) 
      .attr("x", 20); 

rectangle.attr('width', 50 + ((++this.count))) 
      .attr('height', 100) 
      .attr('fill', 'red'); 

     rectangle.exit().remove();