.attr没有定义d3js

Question

我有一个svg，我想放大和平移。 我按照这个例子：http://bl.ocks.org/sgruhier/1d692762f8328a2c9957使用d3.js v3

我在打字稿中实现如下：

            this._svg = d3.select('body')
                .append('svg')
                .attr('style', 'max-width: 100%')
                .attr('viewBox', this._viewbox_x + ' ' + this._viewbox_y + ' ' + this.responsemodel.width + ' ' + this.responsemodel.height)
                .call(d3.behavior.zoom().on('zoom', this.zoom))
                .append('g')

和我的缩放功能

 zoom() {
    this._svg.attr('transform', 'translate(' + (<d3.ZoomEvent>d3.event).translate + ')scale(' + (<d3.ZoomEvent>d3.event).scale + ')');
}

当runnig这个时，我告诉“无法读取未定义的属性'attr'，这来自_svg未定义的事实。

有人可以向我解释为什么会这样以及如何解决它？

提前致谢

Answer 1

我猜是因为你的事件回调中的this引用了window对象。

您是否尝试将代表图表的this绑定到事件函数：

    this._svg = d3.select('body')
        .append('svg')
        .attr('style', 'max-width: 100%')
        .attr('viewBox', this._viewbox_x + ' ' + this._viewbox_y + ' ' + this.responsemodel.width + ' ' + this.responsemodel.height)
        .call(d3.behavior.zoom().on('zoom', this.zoom.bind(this)))
        .append('g')