Question

我试图添加缩放功能，但我失败了。我有一个容器用于缩放：

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

和此：

        var zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", function () {
                alert("here")
                this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
                alert("here 2");
            });

和这个电话：

       .call(zoom);

变换部分...... this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")") ... 给我一个问题。它给了我这个错误：[ts] Property 'translate' does not exist on type 'Event | BaseEvent'。并且不会编译。

如果我将d3.event.translate和d3.event.scale更改为(<any>d3.event).translate和(<any>d3.event).scale，或(<any>d3).event.translate和(<any>d3).event.scale，则错误消失，但变焦不起作用。

合并了<any>次更改后，当我双击鼠标或滚动（第一次）时，我会收到第一个警报。我从来没有进入第二次警报。

我很确定问题出在这一行：this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")。我该如何解决？

我使用TypeScript和d3 v3.5.5构建Power BI自定义视觉效果。

谢谢！

Answer 1

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

我在视觉类的开头添加了这个...在“export class [VISUAL'S NAME（例如，scatterChart）]的部分实现了IVisual {”：

之后

        private container: d3.Selection<SVGElement>;

我在'构造函数'中将其作为包装器添加：

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

其余部分，我进入'更新'。

我认为，这被称为“倾听者”：

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

这是对缩放的调用。

        this.svg.call(zoom);

这是'缩放'功能，可以进行缩放和平移：

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

你可以看到我仍然使用了我认为是问题的基本相同的行（this.container.attr("transform", "translate(" + ((<any>d3.event).translate) + ")scale(" + ((<any>d3.event).scale) + ")");。结果发现真正的问题是我需要添加{{1调用.bind(this)。

d3缩放变换有问题。错误：[ts]属性＆＃39;翻译＆＃39;类型＆＃39;事件|中不存在BaseEvent＆＃39;

1 个答案: