angular2 d3：將d3 svg鼠標pos更新爲組件屬性

Question

D3用於在angular2組件中生成svg。如何更新來自svg事件mousemove的組件中的屬性x和y？從mousemove事件訪問時

export class AxisComponent implements OnInit { 
    x:number; 
    y:number;  

    ngOnInit() { 
     var svgWidth=400; 
     var svgHeight=400; 
     var margin = {top:25, right:25, bottom:50, left:50}; 
     var width = svgWidth - margin.left - margin.right; 
     var height = svgHeight - margin.top - margin.bottom; 

     var svg = d3.select('#container').append('svg') 
      .attr('width', svgWidth) 
      .attr('height',svgHeight) 
      .style('border', '2px solid'); 

     svg.on("mousemove", function(){ 
      var xy = d3.mouse(this); 

      this.x = xy[0]; 
      this.y = xy[0]; 
     }); 
} 

錯誤：

Answer 1

我懷疑它應該是：

svg.on("mousemove",() => { 
    var xy = d3.mouse(svg); // or d3.mouse(d3.event.currentTarget); 
    this.x = xy[0]; 
    this.y = xy[0]; 

或者這樣說：

let self = this; 
svg.on("mousemove", function(){ 
    var xy = d3.mouse(this); 

    self.x = xy[0]; 
    self.y = xy[0]; 
});