导入 d3 时出错？

Question

I am new to d3 and am trying to create a line graph. I can't seem to properly import it, however, I get this error. I am using EmberJS, but I don't know if that is relevant.

Could not find module `d3` imported from 'filepath'.

This is my file:

import Component from '@ember/component';
import { computed } from '@ember/object';
import * as d3 from 'd3';

d3.json('URL');

export default class ComponentName extends Component {
}

I have done npm install and npm ci numerous times, and these relevant modules are in my package.json

    "devDependencies": {
        "@types/d3": "^5.16.3",
        "d3": "^6.2.0",
    }

Other modules I have installed that didn't seem too relevant:

    "devDependencies": {
        "@ember/optional-features": "^2.0.0",
        "@glimmer/component": "^1.0.1",
        "@glimmer/tracking": "^1.0.1",
        "@types/ember": "^3.16.1",
        "@types/ember-qunit": "^3.4.12",
        "@types/ember-resolver": "^5.0.10",
        "@types/ember-test-helpers": "^1.0.4",
        "@types/ember-testing-helpers": "0.0.3",
        "@types/ember__array": "3.0.4",
        "@types/ember__test-helpers": "^1.7.3",
        "@types/qunit": "^2.9.5",
        "@types/rsvp": "^4.0.2",
        "@types/sinon": "^7.0.0",
        "@typescript-eslint/eslint-plugin": "^1.11.0",
        "@typescript-eslint/parser": "^1.11.0",
        "babel-eslint": "^10.1.0",
        "broccoli-asset-rev": "^3.0.0",
        "ember-ajax": "^3.1.0",
        "ember-auto-import": "^1.6.0",
        "ember-cli": "~3.21.2",
        "ember-cli-dependency-checker": "^3.2.0",
        "ember-cli-htmlbars-inline-precompile": "^1.0.3",
        "ember-cli-inject-live-reload": "^2.0.2",
        "ember-cli-sri": "^2.1.1",
        "ember-cli-template-lint": "^1.0.0-beta.1",
        "ember-cli-terser": "^4.0.0",
        "ember-cli-typescript-blueprints": "^3.0.0",
        "ember-cli-uglify": "^2.1.0",
        "ember-disable-prototype-extensions": "^1.1.3",
        "ember-export-application-global": "^2.0.1",
        "ember-load-initializers": "^2.1.1",
        "ember-maybe-import-regenerator": "^0.1.6",
        "ember-qunit": "^4.6.0",
        "ember-resolver": "^8.0.2",
        "ember-sinon": "^4.0.0",
        "ember-sinon-qunit": "^3.4.0",
        "ember-source": "~3.21.1",
        "ember-source-channel-url": "^3.0.0",
        "ember-template-lint": "^2.11.0",
        "ember-try": "^1.4.0",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^5.0.0",
        "eslint-plugin-ember": "^8.13.0",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-prettier": "^3.1.0",
        "eslint-plugin-security": "^1.4.0",
        "loader.js": "^4.7.0",
        "npm-run-all": "^4.1.5",
        "prettier": "^1.18.2",
        "qunit-dom": "^1.4.0",
        "semantic-release": "^15.13.16",
        "sinon": "^7.2.2",
        "typescript": "^4.0.3"
}

This is my tsconfig.json .

{
    "extends": "some-custom-config",
    "compilerOptions": {
      "inlineSourceMap": true,
      "inlineSources": true,
      "baseUrl": ".",
      "module": "es6",
      "paths": {
        "*": [
          "types/*"
        ]
      }
    },
    "include": [
      "app/**/*",
      "addon/**/*",
      "tests/**/*",
      "types/**/*",
      "test-support/**/*",
      "addon-test-support/**/*"
    ]
  }

Answer 1

Turns out a module called 'ember-d3' is needed to use d3 with ember.