Angular 2/Typescript 函数在运行时出现“未定义不是函数”错误

Question

我正在构建一个创建 D3.js 导航栏的 angular（angular2/angular4 不是 angularJS）组件。我对其他 D3 图表没有任何问题，它最初呈现得很好，但是在执行“画笔”时尝试访问其中一个类变量时出现运行时错误。 （旁注：有关通用 Javascript D3 画笔实现的示例，请参见此处：https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172）

该错误似乎与 Angular/Typescript 相关，但与 D3 无关： 'undefined is not a function' 尝试在下面代码中的“brushed()”函数中访问“this.x”时（靠近底部）。

谁能解释我需要做什么才能在“brushed()”函数中访问“this.x”和“this.x.invert”

import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';
import {StockData} from "../../dataServices/stockData";

@Component({
  selector: 'app-navchart',
  templateUrl: './navchart.component.html',
  styleUrls: ['./navchart.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class NavchartComponent implements OnInit, OnChanges {
  @ViewChild('chart') public chartContainer: ElementRef;
  @Input() public stockdata: StockData;

  public margin: any = { top: 20, bottom: 20, left: 20, right: 20};
  public width : number;
  public height: number;
  public svg: any;
  public g: any;
  public chart: any;
  public x: any;
  public y: any;
  public navline: any;
  public navarea: any;
  public data: any;
  public brush: any;


  constructor() { }

  ngOnInit() {
    console.log("Inside the charting - updating the data");
    if (this.stockdata) {
      //console.log(JSON.stringify(this.stockdata));

      this.data = this.stockdata.stocklist;

      setTimeout(() => {
        this.initChart();
        this.drawAxis();
        this.drawRange();
      }, 500);
    }
  }

  ngOnChanges() {

  }

  public initChart(): void {
    let element = this.chartContainer.nativeElement;
    this.width = element.offsetWidth - this.margin.left - this.margin.right;
    this.height = element.offsetHeight - this.margin.top - this.margin.bottom;

    this.svg = d3.select(element).append('svg')
      .attr('width', element.offsetWidth)
      .attr('height', element.offsetHeight);

    this.g = this.svg.append('g')
      .attr("transform", "translate(" + this.margin.left + "," + this.margin.top +")");


    // x and y scale functions - called every time a value needs converted to pixel location
    //this will need moved to a "redraw" function when adjustments to overall chart size are allowed
    this.x = d3.scaleTime()
            .range([0, this.width]);

    this.x.domain(d3.extent(this.data, (d: any) => new Date(d.date )));

    this.y = d3.scaleLinear()
      .range([this.height, 0]);


      //sets the limits of x and y data.
      // this will need to be moved to a redraw when changes to dataset ranges are allowed
      this.y.domain([
        d3.min(this.data, (d: any) => d.close),
        d3.max(this.data, (d: any) => d.close)
      ]);
      console.log ("Min = " + d3.min(this.data, (d: any) => d.close) );

      // line drawing functions
      this.navline = d3.line()
        .curve(d3.curveBasis)
        .x( (d: any) => this.x(new Date(d.date)) )
        .y( (d: any) => this.y(d.close) );

      this.navarea = d3.area()
        .curve(d3.curveBasis)
        .x( (d: any) => this.x(new Date(d.date)) )
        .y1( (d: any) => this.y(d.close) )
        .y0( (d: any) => this.height );



      this.g.append("g")
        .attr("class", "brush")
        .call(d3.brushX().on("end",  this.brushed));
  }


 /* Error is in this function.  It cannot find "this.x" from the class,
  * and gives an undefined error.
  *  Right now the function is just setting debug content, but when 
  * this.x is working, I will add .invert() to it to get the original
  * date values associated with the pixel location on the x-axis.
  */
  public brushed(): void {
    console.log(JSON.stringify(d3.event.selection));
    //returns proper [x0,x1] pixel values such as [102,500] on a svg 800 pixels wide.

    let dat: any = d3.event.selection.map( this.x);
    //let dat: any = d3.event.selection.map( this.x.invert) also fails with "invert does not exist on undefined"
    console.log(JSON.stringify(dat));

    //The error appears to be because it can't find this.x, even though that is declared and works in
    // other sections of the same class.
  }

  //draw x and y axes
  public drawAxis(): void {
      this.g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + this.height + ")")
        .call(d3.axisBottom(this.x));

    }

    public drawRange(): void {

      this.g.append("path")
        .attr("class", "area")
        .attr("d",  this.navarea(this.data) );


      this.g.append("path")
        .attr("class", "line")
        .attr("d",  this.navline(this.data) );
    }


}

如果它很重要，则数据只是一个每日股票条目数组，格式为：

[ {日期，开盘价，最高价，最低价，收盘价} ...] {"日期":"2017-06-07 13:02:00","开盘":"72.6350","高":"72.7700","低":"71.9500","收盘":"72.0800", "音量":"9247460","adjClose":"72.6350"}

D3 喜欢使用“d”引用

Answer 1

注意，这个问题确实是this one的重复。我通常会这样关闭它，但这个问题并不能解释发生了什么，所以我会在这里试一试。

---

您正在向.call 传递一个回调函数。在那个回调中d3 改变了变量this 所引用的内容。它不再引用您的类，而是引用选择中的 g 节点。

所以你有两个选择。一、将其包装在一个 ES6 胖箭头函数中：

.call( d3.brushX().on("end", () => this.brushed() ) );    

这会在 this 周围创建一个闭包并保留对您的类的引用。

或者，两个，使用.bind 来保留它。 .bind 强制保留此内容。

.call( d3.brushX().on("end", this.brushed.bind(this) ) ); 

这里有一些关于这个主题的excellent reading。