как исправить маршрутизацию внутри D3js SVG пути по клику

Question

Я новичок в угловых и D3js, я рисую карту с ним, и я хотел бы перенаправить каждый щелчок по пути svg на другую страницу.

Я пытаюсь так, но

map.component.ts

  constructor(private router: Router) { }

я строю роутер.

    ngOnInit() {

      const width = document.getElementById("container").offsetWidth * 0.95,
      height = 800,
      legendCellSize = 20,
      colors = ['#d4eac7', '#c6e3b5', '#b7dda2', '#a9d68f', '#9bcf7d', '#8cc86a', '#7ec157', '#77be4e', '#70ba45', '#65a83e', '#599537', '#4e8230', '#437029', '#385d22', '#2d4a1c', '#223815'];

    const path = d3.geoPath()
    .pointRadius(2);

    const projection =  d3.geoConicConformal() // Lambert-93
      .center([-19.76,37.63]) // Center
      .scale(2600)
      .translate([width / 2, height / 2]);

    path.projection(projection);

    const svg = d3.select('#map').append("svg")
      .attr("id", "svg")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", "0 0 " + width + " " + height)
      .attr("preserveAspectRatio", "xMinYMid")
      .attr("class", "svgun")
      .style("display","block")
      //.style("margin","auto")
      .style("background","#222b1d")
      .style("color","#bebebe");

    // Append the group that will contain our paths
    const deps = svg.append("g");

    const geojson = departmentJSON;
    const csv = infoJSON;

    var features = deps
      .selectAll("path")
      .data(geojson.features)
      .enter()
      .append("path")
      .attr('id', function(d) {return "d" + d.properties.ID_GEOFLA;})
      .attr("d", path)
      .attr("class","country");

    const min = d3.min(csv, function(e) { return +e.ex; }),
      max = d3.max(csv, function(e) { return +e.ex; });

здесь функция перенаправления на другую страницу

    function goToPage(pageName: number){
       //console.log("let's go"); //it works
       this.router.navigate(['/auth']); // ERROR TypeError: Cannot read property 'router' of undefined

    }

    var quantile = d3.scaleQuantile().domain([min, max])
      .range(colors);

    var tooltip = addTooltip();
    var legend = addLegend(min, max);

    csv.forEach(function(e,i) {
      var countryPath = d3.select("#d" + e.ID_GEOFLA);
        countryPath
        .attr("scorecolor", quantile(+e.ex))
        .style("fill", function(d) { return quantile(+e.ex); })
        .on("click", function(d){
        //alert('let's gooooooo '); //it works
        goToPage(5); //ERROR TypeError: Cannot read property 'router' of undefined

        //this.router.navigate(['not-found']); // ERROR TypeError: Cannot read property 'navigate' of undefined
        })
    });
}
}

map.html

<div id="container" class="container">
  <div id="map"></div>
</div>

Я пытался вызвать функцию toGoPage (5) при нажатии, и у меня есть эта ошибка

// ERROR TypeError: Cannot read property 'router' of undefined

если я попытаюсь выполнить маршрутизацию на клике, у меня будет другая ошибка:

// ERROR TypeError: Cannot read property 'router' of undefined