如何将 d3 缩放和平移添加到 Power BI 视觉对象？

Question

我有一个 Power BI 散点图视觉对象，我想向其添加 d3 缩放和平移。我见过各种使用 d3 添加缩放和平移的简单示例，但其中 none 特定于 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

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

我在视觉 class 的开头添加了这个...在 "export class [VISUAL'S NAME (e.g., scatterChart)] implements IVisual {":

的部分之后

        private container: d3.Selection<SVGElement>;

我在 'constructor' 中添加了这个作为包装器：

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

剩下的，我放在'update'.

我认为这被称为 'listener':

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

这里是缩放的调用。

        this.svg.call(zoom);

这是 'zoomed' 函数，它执行缩放和平移：

    private zoomed() {
        this.container.attr("transform", "translate(" + ((<any>d3.event).translate) + ")scale(" + ((<any>d3.event).scale) + ")");}

Answer 2

我也为此苦苦挣扎。最后，我的解决方案是使用最新的 TypeScript 绑定将我的自定义视觉对象升级到 D3 版本 7。

描述于https://nonodename.com/post/pbid3zoom/

如何将 d3 缩放和平移添加到 Power BI 视觉对象？

How can I add d3 zoom and pan to a Power BI visual?

svg

d3.js

typescript

powerbi