CODEWITHSUNDEEP
d3.jssvg
kodeaben
kodeaben

Reputation: 2055

.attr not defined d3js

I have a svg in which i wish to zoom and pan. I followed this example : http://bl.ocks.org/sgruhier/1d692762f8328a2c9957 using d3.js v3

I am implementing this in typescript as follows: 

            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')

and my zoom function 

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

When runnig this, I´m told "Cannot read property 'attr' of undefined" which comes from the fact that _svg is undefined.

enter image description here

Can someone explain to me why this is and how to solve it?

Thanks in advance

Upvotes: 0

Views: 939

Answers (1)

Julien Leray
Julien Leray

Reputation: 1687

I guess it's because your this on your event callback refer to the window object.

Did you try to bind your this representing your chart to the event function as:

    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')

Upvotes: 1

Related Questions