无法通过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();