I'm currently working on a project in Angular 5 where I'm trying to create a d3 map of US states. I am following the example provided at the following link:
http://bl.ocks.org/mbostock/4699541
However, when I write the code in my .ts file and compile it, I encounter an error stating: 'd3.geoAlbersUsa is not a function'.
Here's a snippet of the code:
import { Component } from '@angular/core';
import * as d3TimeFormat from 'd3-time-format';
import * as d3 from 'd3-selection';
import * as d3Scale from 'd3-scale';
import * as d3Shape from 'd3-shape';
import * as d3Array from 'd3-array';
import * as d3Axis from 'd3-axis';
import * as topo from 'topojson';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {}
ngOnInit() {
this.callMap();
}
callMap() {
var width = 960,
height = 500,
active = d3.select(null);
var projection = d3.geoAlbersUsa()
.scale(1000)
.translate([width / 2, height / 2]);
...
In addition, I have included the following scripts in index.html:
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>
If anyone could assist me in resolving this issue, it would be greatly appreciated.
Thanks!