title: How to implement javascript mousemove function into Angular4
body: <p>I am creating polygon shape using mouse click , d3.js . All the function works properly in normal html and js file, but I need to implement this function into Angular. <br></p>
  
  <p>This is my <strong>angular4 code</strong>, and I put my <strong>d3js mousemove function</strong> in <strong>ngOninit()</strong>.My problem is the variable named <strong><em>this.drawing</em></strong> showing <strong><em>undefined</em></strong><br></p>
  
  <pre><code>  ngOnInit() {
  
  // SELECTING THE STAGE
  var stage = d3.selectAll("svg");
  stage.style("background-color", "grey");
  
  //SELECTING THE FLOOR ONLY
  this.floorOnly = d3.select("#lotsFloor");
  
  //DEFAULT DATA
  this.allTestData.push(this.testData,this.testData1);
  console.log('Displaying default data (allTestData- 2 Shape coorDinates)', this.allTestData);
  
  
  //SETTING DEFAULT DATA TO POLYGON POINTS
  for(var a =0; a &lt; this.allTestData.length; a++) {
  
      var gDefault = this.floorOnly.append('g');
  
          gDefault.append('polygon')
          .attr('points', this.allTestData[a])
          .style('fill', this.getRandomColor());
  
          console.log('alltestData', this.allTestData[a]);
  
          for(var b=0; b &lt; this.allTestData[a].length; b++) {
  
                var circle = gDefault.selectAll('circles')
                .data([this.allTestData[a][b]])
                .enter()
                .append('circle')
                .attr('cx', this.allTestData[a][b][0])
                .attr('cy', this.allTestData[a][b][1])
                .attr('r', 4)
                // .attr('stroke', '#000')
                .attr('fill', 'transparent')
                .attr('is-handle', 'true')
                .style('cursor', 'pointer')
  
          }  
  }
  
  
  //I AM ABLE TO GET THIS.DRAWING VALUE OVER HERE
  console.log('this.drawing======###############################', 
  this.drawing);
  
  
  floorOnly.on('mousemove', function() { 
  //TRIED TO CONSOLE LOG HERE, I GOT THIS.DRAWING VALUE AS UNDEFINED
  console.log('mousemove', this.drawing);        
  
  if(!drawing) return;  
  var g = d3.select('g.drawPoly');
  g.select('line').remove();
  var line = g.append('line')
              .attr('x1', startPoint[0])
              .attr('y1', startPoint[1])
              .attr('x2', d3.mouse(this)[0] + 2)
              .attr('y2', d3.mouse(this)[1])
              .attr('stroke', '#53DBF3')
              .attr('stroke-width', 1);
  
              console.log('line froom mousemove', line);
  });
  
  
  }
  </code></pre>
  
  <p>I want the <strong>mousemove</strong> event to act in <strong>this.floorOnly</strong> elements. In normal js file, the above mousemove function works properly. How to implement the function in angular4?<br>
  Thank you .</p>