title: D3.js V4 Zoom not working in Angular
body: <p>I'm using D3 v4 and Datamaps in my angular project.
  I try to make the zoom working but I have no clue what's the problem.</p>
  
  <p>I have a function that creates the map:</p>
  
  <pre><code>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 ['&lt;div class="hoverinfo"&gt;&lt;strong&gt;', geo.properties.name, ': ' + data.countryData, '&lt;/strong&gt;&lt;/div&gt;'].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);
          }
        }
      });
  }
  </code></pre>
  
  <p>I trigger it in ngAfterContentInit.</p>
  
  <p>When I try to use the mouse wheel to zoom or drag the map, I receive this error message in the console:
  "Cannot read property 'button' of null"</p>
  
  <p>I'm importing D3 and Datamaps like this:</p>
  
  <pre><code>import * as d3 from 'd3';
  import Datamap from 'datamaps/dist/datamaps.world.min.js';
  </code></pre>
  
  <p>I'm really clueless what could be the problem. I've seen other posts and everyone mentioned to import D3 just like I did. Any ideas?</p>