I have an angular project where I am looking to incorporate D3.js.
After running the command in my terminal:
npm i d3
I began writing the code below:
buildGraph(){
var x = scale.linear().domain([0, 5]).range([0, 5]);
d3.select('.chart')
.selectAll('div')
.data(this.createdDataset)
.enter().append('div')
.style('width', function(d){ return x(d) + 'px'; })
.text(function(d) { return d; });
}
and imported D3 as:
import * as d3 from 'd3';
However, I encountered the following error message:
program-quality.component.ts 32:16-24 "export 'scale' (imported as 'd3') was not found in 'd3'
To rectify this, I attempted importing scales like this:
npm i d3-scale
import * as scale from 'd3-scale';
var x = scale.linear().domain([0, 5]).range([0, 5]);
Despite installing d3-scale, the error persisted. I verified that the file is present in my node_modules directory. Can anyone identify what mistake I might be making?
The complete code snippet from the component where I am encountering this issue is provided below:
import { Component, OnInit, Input, AfterContentInit } from '@angular/core';
import { CalculationsService } from '../../services/calculations.service';
import { ProgramQualityCalculationsService } from '../../services/program-quality-calculations.service';
import * as d3 from 'd3';
import * as scale from 'd3-scale';
@Component({
selector: 'app-program-quality',
templateUrl: './program-quality.component.html',
styleUrls: ['./program-quality.component.css']
})
export class ProgramQualityComponent implements OnInit, AfterContentInit{
constructor(private _programQualityCalculations: ProgramQualityCalculationsService) { }
AssessmentDiagnosticsBasline;
DevelopmentBasline;
PerformanceManagementBaseline;
createdDataset: Array<number> = [];
@Input() answers;
ngOnInit() {
this.AssessmentDiagnosticsBasline = this._programQualityCalculations.generateAssessmentDiagnosticsBaseline(this.answers);
this.DevelopmentBasline = this._programQualityCalculations.generateDevelopmentBaseline(this.answers);
this.PerformanceManagementBaseline = this._programQualityCalculations.generatePerformanceManagementBaseline(this.answers);
this.createdDataset.push(this.AssessmentDiagnosticsBasline, this.DevelopmentBasline, this.PerformanceManagementBaseline);
console.table(this.createdDataset);
}
ngAfterContentInit(){
this.buildGraph();
}
buildGraph(){
var x = scale.linear().domain([0, 5]).range([0, 5]);
d3.select('.chart')
.selectAll('div')
.data(this.createdDataset)
.enter().append('div')
.style('width', function(d){ return x(d) + 'px'; })
.text(function(d) { return d; });
}
}