d3事件发生角度2打字稿

Question

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

Answer 1

@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 :)}

Answer 2

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 + ")");
        }