title: Getting d3.events as null in angular2 typescript code
body: <p>I am implementing tooltip in my d3 maps using the code from link
  <a href="http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922" rel="nofollow noreferrer">http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922</a></p>
  
  <p>When I write the same code in my angular 2 typescript file. I get error: </p>
  
  <p>Cannot read property 'transition' of undefined</p>
  
  <p>it is basically not able to find d3.event (getting it as null) which does not happen in javascript code.
  My code in ngAfterViewInit</p>
  
  <pre><code>ngAfterViewInit() {
          this.tooltip = d3.select("map-tag")
              .append("div")
              .attr("class", "tooltip")
              .style("opacity", 0);
  
          this.svgContainer = d3.select("map-tag").append("svg")
              .attr("width", this.width)
              .attr("height", this.height)
              .style("border", "2px solid steelblue")
              .call(this.zoom);
          this.usaSVG = this.svgContainer
              .append("path")
              .attr("d", this.geoPath(this.usaFeatureCollection))
              .style({ fill: "none", stroke: "black" });
  
          this.geoPoint1 = {
              "type": "MultiPoint", "coordinates": [[-80.6665134, 35.0539943]]
          };
          this.div = d3.select("map-tag")
              .append("div")
              .attr("class", "tooltip")
              .style("opacity", 0);
          this.pointPath = this.svgContainer.append("path").attr("d", this.geoPath(this.geoPoint1)).style("stroke", "#FFFFFF")
              .on('mouseover', function (d, i) {
                  this.div.transition()
                      .duration(200)
                      .style("opacity", .9);
                  this.div.text("sample text")
                      .style("left", (d3.event.x) + "px") // I get error here
                      .style("top", (d3.event.y - 28) + "px");
              })
             .on('mouseout', function (d, i) { d3.select(this).style({ fill: 'black' }); });
  
      }
  
  /* Style for Custom Tooltip */
  div.tooltip {   
      position: absolute;           
      text-align: center;           
      width: 60px;                  
      height: 28px;                 
      padding: 2px;             
      font: 12px sans-serif;        
      background: white;   
      border: 0px;      
      border-radius: 8px;           
      pointer-events: none;         
  }
  </code></pre>