Angular 2 D3事件，变化检测和上下文

Question

My Issue: I am using D3 in an Angular 2 component to draw SVGs on the screen. This works fine, however I want to attach events to the D3 produced SVGs and in that event call a method in my Angular 2 Component. That method will take the Data provided by the D3 SVG and assign it to a variable in my Angular 2 Parent component. That variable is an Input variable for my Child Angular 2 component. I cannot currently call the Function in the Angular 2 Component from within the D3 event callback. The keyword "this" has a different context from within the callback than when using it within an Angular 2 component and thus I cannot get a reference to be able to call the function I want.

My Project: So I have an Angular 2 Project and I have 2 Components with a Parent - Child Relationship. The D3 Canvas Component is the Parent and as you can see below I have a data-detail-panel contained within this component template. data-detail-component is powered by the Input Variable 'activeEntity' which I want to be populated based upon the D3 event when the SVG is hovered on.

<div class="row">
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        <div id="d3-canvas-host"></div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <data-detail-panel [activeEntity]="activeEntity"></data-detail-panel>
    </div>
</div>

Now in the Angular 2 Component that initialises the D3 Graph and visualises the data this is how it is set up:

import {
  Component,
  OnInit,
} from '@angular/core';
import {
  DataDetailPanel
} from '../detailPanel';

import * as D3 from 'd3';

@Component({
  template: require('./entitiesVisualisation.html'),
  styles: [require('./entitiesVisualisation.css')],
  directives: [DataDetailPanel],
})
export class EntitiesVisualisation  {
  activeEntity: any;


  drawTopologyView(nodeContainer, entityData, colorRange: D3.scale.Linear < string, string > ) {

    // Make sure that previous elements are cleared before redrawing
    nodeContainer.selectAll('*').remove();
    // Start adding Nodes to D3 Graphs
    let entityNodes: D3.Selection < any > = nodeContainer
      .attr('transform', 'translate(5,0)')
      .attr('stroke-width', '3')
      .attr('stroke', 'white')
      .selectAll()
      .data(sortedEntities)
      .enter();

    // Add new node
    entityNodes
      .append('g')   
      .attr('transform', function(d) {
        return "translate(" + d.x + "," + d.y + ")";   // Set node position from packing algorithm
      }) 
      // Add event to each node
      .on('mouseover',function (data) {
          // If node is ever hovered on then call function to change the current active entity data and pass that D3 SVGs data to that function
          this.changeActiveEntity(data); // This call doesn't work because 'this' has the SVG element as it's context not the Angular 2 component 
      } )
      .on('mouseout', function(data) {
        // D3 Svg is no longer "active" (Hovered) and so I want to update the active entity data to empty object
        this.removeActiveEntity(); // This call doesn't work because 'this' has the SVG element as it's context not the Angular 2 component
      })
      .append('circle');

  }
  changeActiveEntity(newActiveEntity){
    this.activeEntity = newActiveEntity;
  }
  removeActiveEntity(){
    this.activeEntity = {};
  }
}

Answer 1

You could use arrow functions to leverage the lexical this:

.on('mouseout', (data) => { // <----
  // "this" corresponds now to the component instance
  this.removeActiveEntity();
})
.on('mouseout', (data) => { // <----
  // "this" corresponds now to the component instance
    this.removeActiveEntity();
})

See this link for more details:

• https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this