Zoom D3 js

export class Component implements OnInit, AfterContentInit {

    @ViewChild("maps", {static:true}) maps:ElementRef;

    svgEl:any;
    base:number = 1000;
    altezza:number = 600;
    altezzaMappa:number = 5;
    larghezzaMappa:number = 6;
    ConversioneAltezza:number=0;
    ConversioneBase:number=0;
    scala:{b:number,h:number};
    posizioneXAncora:number;
    posizioneYAncora:number;
    valoreDiScala:number;
    entitaAncora:IAnchor;
    entitaArea


    constructor() { }

    ngAfterContentInit(): void {
        this.ShowMap();
    }

    ngOnInit() : void {
    }

    /**
     * Inserisce la mappa
     * @returns {void}
     */

    ShowMap() :void {

        this.scala = this.Conversione( this.altezzaMappa, this.larghezzaMappa );

        // =============================================================
        // CREAZIONE DELL'SVG
        // =============================================================

        this.svgEl = d3.select(this.maps.nativeElement)
                        .append("svg")
                        .attr("id", "svg")
                        .attr("viewBox", `0 0 ${this.scala.b} ${this.scala.h}`)
                        .attr("preserveAspectRatio", "xMidYMid meet")
                        .attr("width", "100%")
                        .attr("height", "100%")
                        .style("max-width", this.scala.b)
                        .style("max-height", this.scala.h)
                        .html(esempio);

        d3.xml("../../../../../assets/images/map.txt", function(data) {
            console.log(data);

        })

        console.log(d3.select("#svg").style("width"));


        // =============================================================
        // ZOOM
        // =============================================================

        const zoom = d3.zoom()
                       .scaleExtent([1, 10])
                       .on("zoom", function(){

                        d3.select("svg#svg").selectAll("*")
                          .attr("transform", d3.event.transform.toString());
                       });




        d3.select("#zoom_in").on("click", function(){
            zoom.scaleBy(d3.transition().duration(750), 1.2);
        });

        d3.select("#zoom_out").on("click", function(){
            zoom.scaleBy(d3.transition().duration(750), .8);
        });

        this.svgEl.call(zoom, d3.zoomIdentity.translate(0,0).scale(.2)).on("dblclick.zoom", null);

        this.svgEl.on("mousemove.zoom", null);

        this.AnchorPosition();

    }

    /**
     * Handler per attivare lo Zoom
     * @returns {void}
     */

    zoomHandler() :void {

        d3.select("svg#svg").selectAll("*")
          .attr("transform", d3.event.transform.toString());
    }

    /**
     * Conversione delle misure nel formato grafico predefinito
     * @param h parametro in altezza da convertire
     * @param w parametro in larghezza da convertire
     * @returns {b:number, h:number}
     */
    Conversione( h:number, w:number ) :{b:number, h:number} {
        const unitaAltezza = this.altezza / h;
        const unitaBase = this.base / w;

       if( unitaBase <= unitaAltezza){
           this.valoreDiScala = unitaBase;
           return {b:this.base, h:unitaBase * h};
       } else {
           this.valoreDiScala = unitaAltezza;
           return {b:unitaAltezza * w, h:this.altezza };
       }

    }

    /**
     * Generazione dell'ancora al click dell'utente
     * @var mouse Array con posizione X - Y al click del mouse
     * @var ancora Shape ancora Generata al click
     * @var dragAnchor funzione che consente di posizionare l'ancora in un punto a piacere dell'area
     * @returns {void}
     */

    AnchorPosition(){
       let self = this;


       this.svgEl.on( "click", function(){

            const mouse = d3.mouse(this);

            // =============================================================
            // CREAZIONE DELL'ANCORA
            // =============================================================

            const ancora = d3.select("#svg")
                            .append("svg")
                            .attr("height", 35)
                            .attr("width", 35)
                            .attr("xmlns", "http://www.w3.org/2000/svg")
                            .attr("viewBox", "0 0 64 64")
                            .attr("id", "anchor")
                            .attr("transform", `translate(${mouse[0]}, ${mouse[1]}) scale(0)`)
                            .attr("x", mouse[0])
                            .attr("y", mouse[1])
                            .html(anchor);



            ancora.transition()
                  .duration(750)
                  .attr("transform", "translate(" + mouse[0] + "," + mouse[1] + ") scale(1)")
                  .attr("x", mouse[0])
                  .attr("y", mouse[1])
                  .attr("transform", "scale(1)");

            ancora.on("click", function(){
                if(d3.event.ctrlKey){
                    ancora.transition()
                          .duration(500)
                          .attr("transform", `translate( ${ancora.attr("x")}, ${ancora.attr("y")} ), scale(0)`)
                          .remove();

                    d3.event.stopPropagation();
                }
            });



            ancora.on("mouseover", function(){
                if(d3.event.ctrlKey){
                    d3.select(this).style("cursor", "crosshair");
                } else {
                    d3.select(this).style("cursor", "default");
                }
            });

            // =============================================================
            // DRAG & DROP DELLE ANCORE
            // =============================================================

            const dragAnchor= d3.drag()
                                .on("start", function(){
                                    d3.select("#anchor")
                                      .style("cursor", "grab")
                                })
                                .on("drag", function(){
                                    d3.select("#anchor")
                                      .style("cursor", "grab")
                                    d3.select(this)
                                        .attr("x", d3.event.x )
                                        .attr("y", d3.event.y )
                                })
                                .on("end", function(){
                                    d3.select("#anchor")
                                      .style("cursor", "grab")
                                      this.posizioneXAncora = d3.event.x;
                                      this.posizioneYAncora = d3.event.y;
                                      console.log("x: " + this.posizioneXAncora, "y: " + this.posizioneYAncora , "scala: " + self.valoreDiScala);
                                      self.ConvertAnchorPosition( this.posizioneXAncora, this.posizioneYAncora, self.valoreDiScala);
                                });

            ancora.call(dragAnchor);

            d3.event.stopPropagation();

        } );

    }

    ConvertAnchorPosition(x:number, y:number, scala:number) :void {
        const PosX = x / scala;
        const PosY = y / scala;

        console.log(PosX, PosY);

    }

}

// HTML

<div class="content-card" style="padding: 0 24px 0 24px;">
     <div class="content" id="content" #maps fusePerfectScrollbar>
          <div class="zoom">
               <button id="zoom_in" type="button">+</button>
               <button id="zoom_out" type="button">-</button>
          </div>
     </div>
</div>