Question

我有一个Power BI散点图视觉，我想添加d3缩放和平移。我已经看到了使用d3添加缩放和平移的各种简单示例，但它们都不是特定于Power BI的。它们似乎都是html示例，我无法将它们转换为我的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。

我真的很失落，绝对可以帮助你！

Answer 1

我明白了。以下是对我有用的部分：

我在视觉类的开头添加了这个......在说出＆＃34;导出类[VISUAL＆＃39; S NAME（例如，scatterChart）]的部分实现了IVisual {＆＃34 ;：

pandasDataFrame.rolling(window=90).apply(mad)

我在＆＃39;构造函数中添加了这个＆＃39;作为包装器：

        private container: d3.Selection<SVGElement>;

其余部分，我进行了更新＆＃39;。

我相信，这被称为“聆听者”

：

        this.container = svg.append("g");

这是对缩放的调用。

        var zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", this.zoomed.bind(this));

这是缩放的＆＃39;功能，进行缩放和平移：

        this.svg.call(zoom);

如何添加d3缩放并平移到Power BI视觉效果？

1 个答案: