D3.js V4 Zoom не работает в Angular

Question

Я использую D3 v4 и Datamaps в своем угловом проекте.Я пытаюсь заставить масштабирование работать, но я понятия не имею, в чем проблема.

У меня есть функция, которая создает карту:

public createChart() {
    this.geoChart = new Datamap({
      element: this.geolocationChart.nativeElement,
      scope: 'world',
      width: null,
      height: null,
      projection: 'mercator',
      responsive: true,
      geographyConfig: {
        hideAntarctica: true,
        borderWidth: 1,
        borderOpacity: 1,
        borderColor: '#ffffff',
        popupTemplate: function(geo, data) {
          return ['<div class="hoverinfo"><strong>', geo.properties.name, ': ' + data.countryData, '</strong></div>'].join('');
        },
        popupOnHover: true,
        highlightOnHover: true,
        highlightFillColor: '#ff4200',
        highlightBorderWidth: 2,
        highlightBorderOpacity: 1
      },
      fills: {
        defaultFill: '#f5f5f5',
        highlight: '#5005a0'
      },
      data: this.convertData(this.defaultCountryData),
      done: function(datamap) {
        datamap.svg.call(d3.zoom().on('zoom', redraw));
        function redraw() {
          datamap.svg.selectAll('g').attr('transform', d3.event.transform);
        }
      }
    });
}

Я запускаю ее в ngAfterContentInit.

Когда я пытаюсь использовать колесо мыши для масштабирования или перетаскивания карты, в консоли появляется следующее сообщение об ошибке: «Невозможно прочитать свойство 'button' of null"

Я импортирую D3 и Datamaps какэто:

import * as d3 from 'd3';
import Datamap from 'datamaps/dist/datamaps.world.min.js';

Я действительно не знаю, в чем может быть проблема.Я видел другие посты, и все упоминали об импорте D3, как и я.Есть идеи?

Answer 1

Итак, после дополнительных исследований я пишу этот код:

function(datamap) {
        d3.select('.datamap').call(
          d3
            .zoom()
            .scaleExtent([0.7, 6])
            .on('zoom', function() {
              datamap.svg.selectAll('g').attr('transform', d3.event.transform);
            })
        );
      }

Он запускается после загрузки графика и, к счастью, работает.По какой-то причине, когда вы вызываете функцию zoom () для datamap.svg, это вызывает ошибку, в то время как datamap.svg и d3.select ('. Datamap') создают аналогичный массив, а d3.select создает выборку.Если кто-то знает, почему это не работает, пожалуйста, объясните.