Блог

Я пытаюсь создать d3-карту штатов США в проекте Angular 5, следуя приведенному ниже примеру:

http://bl.ocks.org/mbostock/4699541

Поэтому, когда я пишу код в файле .ts и компилирую его, он выдает мне сообщение об ошибке: «d3.geoAlbersUsa не является функцией».

Ниже приведен код:

 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]);

    var path = d3.geoPath()
        .projection(projection);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    svg.append("rect")
        .attr("class", "background")
        .attr("width", width)
        .attr("height", height)
        .on("click", reset);

    var g = svg.append("g")
        .style("stroke-width", "1.5px");

    d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
      if (error) throw error;

      g.selectAll("path")
          .data(topo.feature(us, us.objects.states).features)
        .enter().append("path")
          .attr("d", path)
          .attr("class", "feature")
          .on("click", clicked);

      g.append("path")
          .datum(topo.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
          .attr("class", "mesh")
          .attr("d", path);
    });
    ....
    ....

  

Я включаю следующие сценарии в 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>
  

Пожалуйста, помогите мне в этом.

Спасибо.

Это должно быть d3.geo.albersUsa() и geoPath должно быть d3.geo.path()