1、选择元素
在D3.js中，选择元素的函数有两个
- d3.select()
- d3.selectAll()
这两个函数返回的就是选择集
常见的用法如下：
let svg = body.select("svg");//选择body中的svg元素
let p = body.selectAll("p");//选择body中所有的p元素
2、元素操作
name为元素名称； before:css选择器名称
添加(追加)：append(name) ; 插入insert(name, before)；删除remove()
3、绑定数据
D3.js中绑定数据的两个函数
- data()：讲一个数组绑定到选择集上，数组各项和选择集各元素绑定，也就是一一对应的关系
- datum()：将一个数据绑定到所有选择集上
4、update、enter、exit
简单总结：
数据长度 > 元素个数(enter)
数据长度 = 元素个数(update)
数据长度 < 元素个数(exit)
5、vue用例
<
template
lang=
'pug'
>
div
.basic-pane(
:id=
"id")
p hello world
p hello world-2
</
template
>
<
script
>
import
*
as
d3
from
'd3'
export
default {
name:
'',
data () {
return {
id:
''
}
},
methods: {
uuid () {
function
s4 () {
return
Math.
floor((
1 +
Math.
random()) *
0x10000)
.
toString(
16)
.
substring(
1)
}
return (
s4() +
s4() +
'-' +
s4() +
'-' +
s4() +
'-' +
s4() +
'-' +
s4() +
s4() +
s4()
)
},
},
created () {
this.
id =
this.
uuid()
},
mounted () {
//选择p元素
let
p =
d3.
select(
this.
$el).
selectAll(
'p')
//数据长度 > 元素个数(enter); 数据长度 = 元素个数(update); 数据长度 < 元素个数(exit)
let
dataSet = [
'Hello D3 - v3',
'Hello D3 - v4',
'Hello D3 - v5']
// let dataSet = ['Hello D3 - v10']
//获得update部分(update处理：更新)
let
update =
p.
data(
dataSet)
update.
text(
function (
d) {
return
d
})
//获得enter的部分(enter处理：添加)
let
enter =
update.
enter()
enter.
append(
'p')
.
text(
function (
d) {
return
d
})
//获得exit的部分(exit处理:去除)
let
exit =
update.
exit()
exit.
remove()
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.basic-pane {
width:
100%;
height:
1000px;
}
</
style
>