Question

我正在构建一个角度（angular2 / angular4而不是angularJS）组件，它会创建一个D3.js导航栏。我没有与其他D3图表有任何问题，并且它最初渲染得很好，但是当执行“画笔”时尝试访问其中一个类变量时出现运行时错误。（旁注：请参阅此示例，了解一般Javascript D3画笔实现的示例：https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172）

错误似乎与Angular / Typescript相关，而不是D3，但是：尝试在下面的代码（靠近底部）的“brushed（）”函数中访问“this.x”时，“undefined不是函数”。

任何人都可以解释我需要做什么才能在“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) );
    }


}

如果重要，数据只是每日股票条目的数组，格式为：

[{date，open，high，low，close} ...] {“date”：“2017-06-07 13:02:00”，“open”：“72.6350”，“high”：“72.7700”，“low”：“71.9500”，“close”：“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。

使用Angular 2 / Typescript函数

1 个答案: