angular2 d3:将d3 svg鼠标pos更新为组件属性

时间:2016-09-06 13:52:12

标签: d3.js svg angular

D3用于在svg组件中生成angular2。如何更新svg事件x中组件中的属性ymousemove

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事件访问时出错:

enter image description here

1 个答案:

答案 0 :(得分:4)

我怀疑它应该是:

func sortingFunction(obj1: YourClass, _ obj2: YourClass) -> Bool {
    return (str1.name.lowercaseString.hasPrefix(text!) && !obj2.name.lowercaseString.hasPrefix(text!)) ||
        (obj1.name.lowercaseString.containsString(text!) && !obj2.name.lowercaseString.containsString(text!)) ||
        (obj1.allEmails.lowercaseString.containsString(text!) && !obj2.allEmails.lowercaseString.containsString(text!)) &&
        (obj1.allNumbers.lowercaseString.containsString(text!) && !obj2.allNumbers.lowercaseString.containsString(text!))
}

self.filteredNames = self.names.sort(sortingFunction)

或者这样:

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