相关疑难解决方法(0)

我在几个地方读过,关键的区别是" this在箭头函数中是词法绑定的".这一切都很好,但我实际上并不知道这意味着什么.

我知道这意味着它在定义函数体的大括号范围内是独一无二的,但我实际上无法告诉你以下代码的输出,因为我不知道所指的this是什么,除非它指的是胖箭头函数本身....这似乎没用.

var testFunction = () => { console.log(this) };
testFunction();

太棒了；拖动 SVG 会导致其旋转和平移。

我正在尝试使用 D3 (v.4) 作为 Angular 服务的一部分在 SVG 组上实现拖动和缩放事件。

this.unitGroup = this.svg.append('g')
  .attr('id', 'unitGroup')
  .call(this.drag)
  .call(this.zoom);

拖动可平移 SVG。

drag = d3.drag()
.on('start', () => {
  console.log('drag start');
  this.setClickOrigin(d3.event);
})
.on('drag', (d, i, n) => {
  const target = d3.select(n[i]).node() as any;
  const m = target.getCTM();
  const x = d3.event.x - this.clickOrigin.x;
  const y = d3.event.y - this.clickOrigin.y;
  this.setClickOrigin(d3.event);
  this.translate(target, x, y);
});

缩放时会旋转 SVG。

zoom = d3.zoom()
.on('zoom', (d, i, n) => {
  const target = d3.select(n[i]).node() as …

D3 用于svg在angular2组件中生成 a 。如何从 svg 事件更新属性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];
        });
}

从mousemove事件访问时出错：