0

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.

This is my angular4 code, and I put my d3js mousemove function in ngOninit().My problem is the variable named this.drawing showing undefined

  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 < 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 < 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);
});


}

I want the mousemove event to act in this.floorOnly elements. In normal js file, the above mousemove function works properly. How to implement the function in angular4?
Thank you .

user3431310
  • 719
  • 1
  • 10
  • 30
  • 2
    To preserve `this`, define the callback as an arrow function. Replace `floorOnly.on('mousemove', function() { ... }` with `floorOnly.on('mousemove', () => { ... }`. More details are given in [this answer](https://stackoverflow.com/a/20279485/1009922). – ConnorsFan Jan 18 '18 at 02:10
  • Hi @ConnorsFan thank you for showing me the correct answer :) . Anyhow just put your comment in answer section. I will acceptit – user3431310 Jan 18 '18 at 02:19
  • 1
    You are welcome. To be honest, this problem is reported very very often on StackOverflow. If you don't mind, I will mark your answer as a duplicate of another question (I haven't decided which one yet but I will easily find one). – ConnorsFan Jan 18 '18 at 02:21
  • 1
    Oh, somebody did it while I was writing my comment. :-) – ConnorsFan Jan 18 '18 at 02:23
  • ok no problem, would be useful for other users as well , Thank you – user3431310 Jan 18 '18 at 02:24

0 Answers0