angular2 d3:将d3 svg鼠标pos更新为组件属性 [英] angular2 d3: update d3 svg mouse pos to component property

问题描述

D3用于在angular2组件中生成svg.如何从svg事件mousemove更新组件中的属性x和y?

D3 is used to generate a svg in an angular2 component. How to update properties x and y in component from svg event 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];
        });
}

从mousemove事件访问时出错:

推荐答案

我怀疑应该是

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

这篇关于angular2 d3:将d3 svg鼠标pos更新为组件属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！