javascript - d3 缩放变换有问题。错误 : [ts] Property 'translate' does not exist on type 'Event | BaseEvent'

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

我想通了。以下是对我有用的部分:

我在视觉类的开头添加了这个...在“导出类 [视觉的名称(例如，散点图)] 实现 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) + ")"); 。事实证明，真正的 问题是我需要添加 .bind(this) 在调用 zoomed 。