无法通过 PowerBI 开发工具中的更新方法更新对象 属性

Cannot update object property via the Update Method in PowerBI Development Tools

我在开发 Power BI 方面仍然是初学者,并且 我在使用 "Power BI Development Tools" 时遇到问题。 ( https://app.powerbi.com/devTools )

问题是 "I cannot update object property via the update method".

比如我在正文中创建了两个对象, 分别是 "one rectangle" 和 "one text object"。 为了应用 selectAll 方法,我在矩形对象中使用了 selectAll 方法。 (比如输入datapoints增加,应该是更多的矩形)

在这两个对象中,我在它们的属性中写了“++this.count”, 假设当单击 window 或调整 window 大小时,两个对象都会更改字词(文本对象)或宽度(矩形对象)。

然而,结果却是不一样的结果。 单击 window 或调整 window 大小时,文本对象的文字发生了变化,但矩形对象的宽度没有发生变化。

我想请教一下,我想我一定是概念理解有误,但不知道从哪里开始探索比较好。

谁能告诉我 (1) 为什么在更新方法中只有一个对象被改变(更新)? (2) 我的概念哪一部分是错误的?

非常感谢。

代码如下。


模块powerbi.visuals{ 导出接口测试​​数据{ 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()
    }
}

}

您只在 D3 enter 事件上设置矩形 width/height,那是它首次添加到页面时。查看显示如何更新新节点和现有节点的 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();