angular - 在 d3 中获取数据的问题

Question

前端编码的新功能

我试图从这个例子中获得 Angular 8 中的相同代码， 但在定义行时遇到问题（检查屏幕截图）。

代码截图

如何获得价值d

    private drawChart(svg: any, width: number, height: number, margin: number, data: any[]) {
        const chartWidth = width - 2 * margin;
        const chartHeight = height - 2 * margin;
        const n = data[0].length;
        const maxValue = this.getMaxValue(data);

        svg
          .attr('viewBox', `0 0 ${width} ${height}`)
          .attr('preserveAspectRatio', 'xMinYMid');

        svg.selectAll('g').remove();

        const xScale = d3.scaleLinear()
          .domain([0, n-1])
          .range([0, chartWidth]);

        const yScale = d3.scaleLinear()
          .domain([0, maxValue])
          .range([chartHeight, 0]);

        const line = d3.line()
          .defined(d => !isNaN(d.data))
          .x((d, i) => xScale(i))
          .y(d => yScale(d.data))
          .curve(d3.curveMonotoneX)

        svg.append('g')
          .attr('class', 'x axis')
          .attr('transform', `translate(${margin}, ${chartHeight + margin})`)
          .call(d3.axisBottom(xScale).ticks(Math.min(Math.floor(chartWidth / 25), n)));

        svg.append('g')
          .attr('class', 'y axis')
          .attr('transform', `translate(${margin}, ${margin})`)
          .call(d3.axisLeft(yScale).ticks(Math.min(Math.floor(chartHeight / 15), maxValue)));

        const colors = ['steelblue', 'orange'];

        data.forEach((serie, i) => {
          svg
            .append('g')
            .attr('transform', `translate(${margin}, ${margin})`)
            .append('path')
            .datum(serie)
            .attr('fill', 'none')
            .attr('stroke', colors[i])
            .attr('stroke-width', 1)
            .attr('stroke-linejoin', 'round')
            .attr('stroke-linecap', 'round')
            .attr('class', 'line') 
            .attr('d', line)
        });
      }

      private generateData(n, maxValue) {
        return new Array(n).fill(null).map(() => ({data: Math.random() * maxValue }))
      }

      private getMaxValue(series: {data: number}[][]): number {
        return series.reduce((serieMax, serie) => {
          return Math.max(serieMax, serie.reduce((max, value) => Math.max(max, value.data), -Infinity))
        }, -Infinity);
      }
  ngAfterViewInit() {
    const data = [
      this.generateData(20, 10),
      this.generateData(20, 10)
    ];
    const { width } = this.host.nativeElement.getBoundingClientRect();
    const height = width / (16/9);
    const margin = Math.min(Math.max(width * 0.1, 20), 50);

    const svg = d3.select(this.svgRef.nativeElement)
    this.drawChart(svg, width, height, margin, data);
    fromEvent(window, 'resize')
      .pipe(
        tap(() => this.loading = true),
        debounceTime(300)
      ).subscribe(() => {
        const { width } = this.host.nativeElement.getBoundingClientRect();
        const height = width / (16/9);
        const margin = Math.min(Math.max(width * 0.1, 20), 50);
        this.drawChart(svg, width, height, margin, data);
        this.loading = false;
      });

  }

包.json

{
  "name": "ng-nav",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxyconfig.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@fortawesome/fontawesome-free": "^5.8.2",
    "@katze/ngx-d3": "^0.2.1",
    "@ng-select/ng-select": "^2.20.5",
    "@types/d3": "^5.7.2",
    "angular-svg-icon": "^8.0.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "d3": "^5.14.2",
    "ngx-bootstrap": "^5.2.0",
    "ngx-daterange": "^1.0.17",
    "ngx-svg": "^0.5.2",
    "ngx-toastr": "^11.2.1",
    "rxjs": "~6.5.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.20",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.5.3"
  }
}

标签： angulard3.js