# D3的安装和使用
# script引入
1、下载 d3.js 文件：
https://github.com/d3/d3/archive/refs/tags/v7.6.1.zip
将其文件解压之后，放置对应 js 文件夹中即可；
2、直接引用 js 文件：
<script src="https://d3js.org/d3.v7.min.js"></script>
1
3、或者import引入
import * as d3 from "https://cdn.skypack.dev/d3@7";
1
示例
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- script 引入 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// import 引入
import * as d3 from "https://cdn.skypack.dev/d3@7";
var data = [1,2,3];
var p = d3.select("body").selectAll("p")
.data(data)
.enter()
.append("p")
.text("hello");
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# npm下载安装
1、下载安装
npm install d3
npm install d3@7.6.1
1
2
2
2、引入
import * as d3 from 'd3';//在需要使用d3的页面中引用
1
3、使用
<template>
<div class="WH">
<!-- svg绘制容器 -->
<div class="svg-main"></div>
</div>
</template>
<script>
import * as d3 from 'd3';
export default {
data(){
return{}
},
mounted() {
this.initSVG();
},
methods: {
initSVG(){
// 设置svg宽度大小
const width = 1385, height = 654;
// 创建svg
this.svg = d3.select('div.svg-main')
.append('svg')
.attr("id","svgBox")
.attr('width',width)
.attr('height',height)
.style("background-color","#f5f5f5")
const svgWrap = this.svg.append("g").attr('class','map-wrap');//创建包裹容器
}
}
}
</script>
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
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