javascript - Problemer med d3 zoom-transformasjon. Feil: [ts] Egenskapen 'translate' finnes ikke på typen 'Event | BaseEvent'

Jeg prøver å legge til zoom, men jeg mislykkes totalt. Jeg har en beholder for zoomen:

        this.container = svg.append("g");  

og dette:

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

og denne samtalen:

       .call(zoom);

Transformasjonsdelen ... this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")") ... gir meg et problem. Det gir meg denne feilen: [ts] Property 'translate' does not exist on type 'Event | BaseEvent'. Og vil ikke kompilere.

Hvis jeg endrer d3.event.translate og d3.event.scale til (<any>d3.event).translate og (<any>d3.event).scale, eller til (<any>d3).event.translate og (<any>d3).event.scale, forsvinner feilen, men zoomingen fungerer ikke.

Med de <any> endringene innarbeidet, når jeg dobbelklikker med musen eller blar (første gang) får jeg min første varsling. Jeg kommer aldri til min andre varsling.

Jeg er ganske sikker på at problemet er med denne linjen: this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"). Hvordan kan jeg fikse det?

Jeg bruker TypeScript og d3 v3.5.5 for å lage en tilpasset Power BI-visualisering.

Takk!

Svar #1

Jeg fant det ut. Her er delene av det som fungerte for meg:

Jeg la dette til i starten av visualets klasse... etter delen som sier "export class [VISUALS NAVN (f.eks. scatterChart)] implements IVisual {"

        private container: d3.Selection<SVGElement>;

Jeg la dette til i 'konstruktøren' som en wrapper:

        this.container = svg.append("g");  

Resten av dette legger jeg i 'oppdatering'.

Dette, tror jeg, refereres til som en 'lytter':

        var zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", this.zoomed.bind(this));

Her er lenken til Zoom.

        this.svg.call(zoom);

Og dette er 'zoome'-funksjonen, som gjør zooming og panorering:

    private zoomed() {
        this.container.attr("transform", "translate(" + ((<any>d3.event).translate) + ")scale(" + ((<any>d3.event).scale) + ")");}

Du kan se at jeg fortsatt brukte stort sett den samme linjen som jeg trodde var problemet (this.container.attr("transform", "translate(" + ((<any>d3.event).translate) + ")scale(" + ((<any>d3.event).scale) + ")");. Det viste seg at det virkelige problemet var at jeg trengte å legge til .bind(this) i kallet til zoomed.