>我正在使用 D3 构建条形图，当我使用 Ionic Cordova 运行/构建 android 运行时它运行良好，但当我使用 --prod 模式运行时它会出错，即 ionic cordova 运行/构建安卓 --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
最后，在我添加后它开始工作
this.g.append('g')
.call(d3Axis.axisLeft(this.y).tickFormat ((d: any) => {
return d;
})
)
在生产模式下运行时，似乎需要 tickformat 。 无论如何还是谢谢。