D3.js入門 select選擇器 元素的插入和刪除 dataum和data 動態屬性 官網

關於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'
})