使用离子4的d3条形图无法在生产模式下加载到设备上

Question

我正在使用D3构建条形图，当我使用ionic cordova运行/构建android时，它运行良好，但是当我使用--prod模式运行时，它给出了错误，即ionic cordova运行/构建android --prod。该应用程序可以正常打开，但条形图无法绘制。 x轴绘制精细，但无法绘制y轴。有人可以帮忙吗？我已在下面附加了错误消息的图像。在过去的几天里，我一直处于这种状态，任何帮助都会非常有帮助。在此先感谢

    **here is mycode** //  

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

import * as d3 from 'd3-selection';
import * as d3Scale from 'd3-scale';
import * as d3Array from 'd3-array';
import * as d3Axis from 'd3-axis';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  barData = [
    { season: 'S1', viewers: 250000 },
    { season: 'S2', viewers: 380000 },
    { season: 'S3', viewers: 500000 },
    { season: 'S4', viewers: 690000 },
    { season: 'S5', viewers: 690000 },
    { season: 'S6', viewers: 750000 },
    { season: 'S7', viewers: 1000000 },
    { season: 'S8', viewers: 1700000 }
  ];
  title = 'originals';
  subtitle = 'Viewers per season for';
  width: number;
  height: number;
  margin = { top: 20, right: 20, bottom: 30, left: 40 };
  x: any;
  y: any;
  svg: any;
  g: any;

  constructor(private _platform: Platform) {
    this.width = 900 - this.margin.left - this.margin.right;
    this.height = 500 - this.margin.top - this.margin.bottom;
  }

  ionViewDidEnter() {
    this.init();
    this.initAxes();
    this.drawAxes();
    this.drawChart();
  }

  init() {
    this.svg = d3.select('#barChart')
      .append('svg')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('viewBox', '0 0 900 500');
    this.g = this.svg.append('g')
      .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
  }

  initAxes() {
    this.x = d3Scale.scaleBand().rangeRound([0, this.width]).padding(0.1);
    this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
    this.x.domain(this.barData.map((d) => d.season));
    this.y.domain([0, d3Array.max(this.barData, (d) => d.viewers)]);
  }

  drawAxes() {
    this.g.append('g')
      .attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(d3Axis.axisBottom(this.x))
      .attr('font-size', '30');
    this.g.append('g')
      .attr('class', 'axis axis--y')
      .call(d3Axis.axisLeft(this.y))
      .append('text')
      .attr('class', 'axis-title')
      .attr('transform', 'rotate(-90)')
      .attr('y', 6)
      .attr('dy', '0.71em')
      .attr('text-anchor', 'end')
      .attr('fill', 'rgb(34, 167, 240)')
      .attr('font-size', '50')
      .text('viewers');
  }

  drawChart() {
    this.g.selectAll('.bar')
      .data(this.barData)
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .attr('fill', 'rgb(34, 167, 240)')
      .attr('x', (d) => this.x(d.season))
      .attr('y', (d) => this.y(d.viewers))
      .attr('width', this.x.bandwidth())
      .attr('height', (d) => this.height - this.y(d.viewers));
  }
}

**pacjage.json**
{
  "name": "example",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/android-permissions": "^5.17.1",
    "@ionic-native/camera": "^5.17.1",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/document-viewer": "^5.17.0",
    "@ionic-native/file": "^5.17.0",
    "@ionic-native/file-opener": "^5.17.0",
    "@ionic-native/file-transfer": "^5.17.0",
    "@ionic-native/local-notifications": "^5.17.1",
    "@ionic-native/network": "^5.17.0",
    "@ionic-native/screen-orientation": "^5.17.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "cordova-android": "8.1.0",
    "cordova-browser": "6.0.0",
    "cordova-plugin-android-permissions": "^1.0.2",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-document-viewer": "^0.9.13",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^2.2.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-sqlite-storage": "^3.4.0",
    "core-js": "^2.5.4",
    "d3": "^5.14.2",
    "es6-promise-plugin": "^4.2.2",
    "jquery": "^3.4.1",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-network-information": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-document-viewer": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-file": {},
      "cordova-plugin-file-opener2": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      }
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

**here is the image of my error message**

  [1]: https://i.stack.imgur.com/zs5KM.png

Answer 1

最后在我添加后它开始工作

 this.g.append('g')
  .call(d3Axis.axisLeft(this.y).tickFormat ((d: any) => {
     return d;
   })
    )

似乎在生产模式下运行时，tickformat是必需的。无论如何还是谢谢。