首先新建一个 npm 项目。

1
2
3
4
5
6
7
8
# 创建目录
mkdir d3-project

# 进入目录
cd d3-project

# 初始化项目
npm init

输出如下, 根据实际情况填写即可, 回车表示默认.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (d3-project)
version: (1.0.0)
description: d3
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC) MIT
About to write to C:\Users\Qiu-Weidong\Documents\typescript\d3-project\package.json:

{
  "name": "d3-project",
  "version": "1.0.0",
  "description": "d3",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}


Is this OK? (yes)

初始化完成之后,可以看到有一个 package.json 文件

接下来安装 typescript 和 nodejs 的类型声明, 并生成 tsconfig.json 文件

1
2
3
4
5
# 安装 typescript 和 nodejs 的类型声明
npm install --save-dev typescript tslint @types/node

# 生成 tsconfig.json
tsc --init

修改生成的 tsconfig.json 文件, 将输出目录修改为 dist

1
2
3
4
5
{
  ...
  "outdir": "dist"
  ...
}

修改 package.json 文件, 添加两个命令 build 和 start

1
2
3
4
5
6
7
8
9
{
  ...
  "scripts": {
    ...
    "build": "tsc",
    "start": "parcel index.html"
  }
  ...
}

这将使用 TypeScript 编译项目并使用 Parcel 打包，以便在浏览器中查看。

最后还需要安装 parcel

1
npm install --save-dev parcel-bundler

创建一个 html 文件 index.html, 以便查看渲染结果

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>d3-project</title>
</head>
<body>
  <!-- 这里加载一个 app.js 文件, 我们的 d3 代码会写在这里 -->
  <script src="dist/app.js"></script>
</body>
</html>

还需要安装 d3 相关依赖.

1
npm install d3 @types/d3

最后创建一个 app.ts 文件, 编写 d3 相关代码.

1
2
3
4
5
6
7
8
import * as d3 from 'd3';

const data = [10, 20, 30, 40, 50];

const svg = d3.select('body')
  .append('svg')
  .attr('width', 200)
  .attr('height', 200);