D3.js入门 select选择器 元素的插入和删除 dataum和data 动态属性

Posted 2020-12-22  Island

关于D3

官网：https://d3js.org/

是一个数据可视化的库，技术基础是SVG，兼容性是IE9+，语法上近似jQuery

对比three.js three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具与渲染循环

1 导入

<script src="https://d3js.org/d3.v5.min.js"></script>

2 获取单个节点，标签名的形式

// 获取dom结点，形式是一个groups数组
var body = d3.select(\'body\');
console.log(body)

3 获取多个节点，标签名的形式

// 2 通过标签名获取，获取所有,groups数组里面拿到的是nodelist数组
var all = d3.selectAll(\'p\')
console.log(all)

4 根据类选择器和id选择器获取标签

// 根据类选择器获取DOM
var app = d3.select(\'.app\')
console.log(app)
//id选择器
var container = d3.select(\'#app\')
console.log(container)

5 绑定值或数组，datum,data

//datnum绑定数据到选择集上(selectAll)
var data = \'dataum set value\'
container.selectAll(\'p\').datum(data).text((item,index)=>{
    return index + ":" + item;
})
// console.log(container.selectAll(\'p\').datum(data))

//data 数组到数组，绑定数组到选择集上
var datalist = [10,20,30]
container.selectAll(\'p\').data(datalist).text((item,index)=>{
    return index + ":" + item;
})

6 元素的插入和删除

// 添加id,插入元素
container.append(\'p\').text(\'china\').attr(\'id\',\'china\')
//删除元素
container.select(\'#china\').remove()

7 处理动态属性

// data 数组到数组，绑定数组到选择集上
var datalist = [10, 20, 30]
container.selectAll(\'p\').data(datalist).text((item, index) => {
    return index + ":" + item;
})
//设置颜色
    .style(\'color\', (d, i) => {
    return d > 10 ? \'red\' : \'blue\'
})
//设置字体大小
    .style(\'font-size\', (d, i) => {
    return d + \'px\'
})