Question

我正在尝试在Angular 5项目中创建美国各州的d3地图，如下例：

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>

请帮助我。

谢谢。

Answer 1

替换

d3.geoAlbersUsa（）

到

d3.go.geoAlbersUsa（）

Answer 2

应为d3.geo.albersUsa()，geoPath应为d3.geo.path()

出现错误：d3.geoAlbersUsa不是Angular中的函数

2 个答案: