CODEWITHSUNDEEP
angulartypescriptd3.js
Awais Khan
Awais Khan

Reputation: 175

d3 events issue with angular 2 typescript

I am trying to include zooming and panning functionality in d3. which works in javascript but giving error in typescript. d3.event.translate and d3.event.scale are not working in angular2 typescript

this.svg = this.host.append('svg')
        .attr('width', this.width)
        .attr('height', this.height)
        .style({ 'float': 'right' })
        .attr("pointer-events", "all")
        .call(d3.behavior.zoom().on("zoom", redraw))
        .append('svg:g');

        function redraw() {
        this.svg.attr("transform",
            "translate(" + d3.event.translate + ")"
            + " scale(" + d3.event.scale + ")");
        }

show this error on console.

   Property 'translate' does not exist on type 'Event | BaseEvent'. Property 'scale' does not exist on type 'Event | BaseEvent'.

Upvotes: 2

Views: 2902

Answers (2)

eko
eko

Reputation: 40677

You have a problem with your scope of this

.call(d3.behavior.zoom().on("zoom", redraw))
        .append('svg:g');

        function redraw() {
        this.svg.attr("transform",
            "translate(" + d3.event.translate + ")"
            + " scale(" + d3.event.scale + ")");
        }

should be something like:

.call(d3.behavior.zoom().on("zoom", redraw.bind(this))) //<-- bind the outer this here
        .append('svg:g');

        function redraw() {
        this.svg.attr("transform",
            "translate(" + d3.event.translate + ")"
            + " scale(" + d3.event.scale + ")");
        }

or with the es6 arrow syntax:

.call(d3.behavior.zoom().on("zoom", ()=> redraw() ) ) //<-- arrow syntax
        .append('svg:g');

        function redraw() {
        this.svg.attr("transform",
            "translate(" + d3.event.translate + ")"
            + " scale(" + d3.event.scale + ")");
        }

Upvotes: 4

Mark
Mark

Reputation: 108567

@mkaran's answer works, but rather defeats the purpose of typescript. The proper cast here is:

function redraw() {

  let e = (<d3.ZoomEvent> d3.event);

  this.svg.attr("transform",
    "translate(" + e.translate + ")"
    + " scale(" + e.scale + ")");
}

Since the purpose the TypeScript is types, resorting to any is considered bad practice*.

You should also attempt to avoid in-line functions, and rather use proper methods of your class. But that's a question for another day...

*sometimes it's just easier :)

Upvotes: 4

Related Questions