使用D3查詢SVG
d3.select('#rect1')
d3.select('#maingroup rect')
d3.selectAll('.rect1')
d3..selectAll('rect')
d3.selectAll('#maingroup rect'')
使用D3設(shè)置SVG中的屬性
- element.attr(‘a(chǎn)ttr_name’, ‘a(chǎn)ttr_value’)
- 常見的屬性：
id牍蜂，class，
x蜂奸， y浸剩， cx符喝， cy杠氢，
fill沪饺， stroke者甲，
width怜姿，height慎冤，r，
transform -> translate, rotate, scale
<rect id="test" class="test" stroke="black" width="60" height="60" fill="#000" x="300" y="300"></rect>
// 設(shè)置元素屬性
d3.select('.test').attr('x', '100');
// 鏈式調(diào)用沧卢，.attr(…)返回的是選擇的圖元本身
d3.select('svg').attr('width', '100').attr('height', '100').attr('x', '300').attr('y', '300');
// 獲取元素屬性
const svgWidth = d3.select('svg').attr('width');
d3.select('#group').attr('transform', 'translate(100, 100)');
使用D3添加&刪除SVG中的屬性
const myRect = d3.select('#test').append('rect').attr('x', '100');
const wrap = d3.select('#wrap').append('g').attr('id', 'group');
// 鏈式調(diào)用
const myRect = d3.select('.wrap').append('g').attr('id', 'group')
.append('rect').attr('fill', 'black').attr('width', '100').attr('height', '100');
d3.select('rect').remove()
D3數(shù)據(jù)讀取- csv數(shù)據(jù)
d3.csv('test.csv').then(res => {
console.log(data)
})
D3數(shù)值計算
- d3.max(array) // 返回數(shù)組中的最大值
- d3.min(array) // 返回數(shù)組中的最小值
- d3.extent(array) // 同時返回最小值與最大值蚁堤，以數(shù)組的形式
d3.max([1, 2, 3, 5, 4]) // 5
d3.min([1, 2, 3, 5, 4]) // 1
d3.extent([1, 2, 3, 5, 4]) // [1, 5]
const arr = [
{
name: 'zhangsan',
age: 20
},
{
name: 'lisi',
age: 30
},
{
name: '王五',
age: 40
},
]
// 回調(diào)函數(shù)形式
const maxAge = d3.max(arr, d => d.age) // 40
const minAge = d3.min(arr, d => d.age) // 20
const ageArange = d3.extent(arr, d => age) // [20, 40]
D3線性比例尺
- 比例尺用于把實際數(shù)據(jù)空間映射到屏幕(畫布)空間，即兩個空間的轉(zhuǎn)化
- d3.scaleLinear()：
1但狭、 定義一個線性比例尺披诗，返回的是一個函數(shù)。
2立磁、eg: let scale = d3.scaleLinear(); // scale為函數(shù)
- scale.domain([min_d, max_d]).range([min, max])：
1呈队、設(shè)置比例尺的定義域與值域。
2唱歧、線性比例尺的定義域和值域都是連續(xù)的宪摧，需分別給出最大值與最小值。
3迈喉、const scale = d3.scaleLinear().domain([0, 100]).range([0, 1000]);
- 比例尺本質(zhì)上是一個函數(shù)：
const scale = d3.scaleLinear().domain([0, 100]).range([0, 1000]);
console.log(scale(50)) // 500
console.log(scale(70)) // 700
- 常結(jié)合讀取的數(shù)據(jù)與d3.max等接口連用：
const arr = [
{
name: 'zhangsan',
age: 20
},
{
name: 'lisi',
age: 30
},
{
name: '王五',
age: 40
},
]
const xScale = d3.scaleLinear()
.domain([0, d3.max(arr, d => d.age)])
.range([0, innerWidth])
D3Band比例尺
- d3.scaleBand():
1绍刮、定義一個‘條帶’比例尺，返回的是一個函數(shù)挨摸。
2孩革、eg: let scale = d3.scaleBand();
- scale.domain(array).range([min, max])：
1、設(shè)置比例尺的定義域與值域得运。
2膝蜈、Band比例尺的定義域是離散的，值域是連續(xù)的熔掺。
const scale = d3.scaleBand().domain(['test1'饱搏，'test2'， 'test3']).range([0, 120]);
console.log(scale('test2')) // 40
console.log(scale('test3')) // 80
const arr = [
{
name: 'zhangsan',
age: 20
},
{
name: 'lisi',
age: 30
},
{
name: '王五',
age: 40
},
]
const yScale = d3.scaleBand()
.domain(arr.map(d => d.name))
.range([0, innerHeight])
.padding(0.1)
坐標(biāo)軸
- 定義坐標(biāo)軸（獲得結(jié)果仍是函數(shù)）
1置逻、const yAxis = d3.axisLeft(yScale);
2推沸、const xAxis = d3.axisBottom(xScale)；
3、axisLeft：左側(cè)坐標(biāo)軸
4鬓催、axisBottom：底側(cè)坐標(biāo)軸肺素。
5、坐標(biāo)軸的刻度對應(yīng)比例尺的定義域宇驾。
5倍靡、坐標(biāo)軸在畫布的繪制對應(yīng)比例尺的值域。
- 繪制坐標(biāo)軸：
1课舍、const yAxisGroup = g.append('g').call(yAxis);
2塌西、const xAxisGroup = g.append('g').call(xAxis);
- 任何坐標(biāo)軸在初始化之后會默認放置在坐標(biāo)原點，需要進一步的平移
引入坐標(biāo)軸 - Margin
const margin = {top: 60, right: 30, bottom: 60, left: 200}
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const g = svg.append('g').attr('id', 'maingroup')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
Data-Join
- 本質(zhì)上是將數(shù)據(jù)與圖元進行綁定
- data(…)只考慮數(shù)據(jù)和圖元數(shù)目相同的情況
- 調(diào)用形式：d3.selectAll(‘.class’).data(myData).join(‘圖元’).attr(d => …).attr((d, i) => …)
- .join(…)會根據(jù)數(shù)據(jù)的條目補全or刪除圖元筝尾。
- 若有新增的數(shù)據(jù)捡需，則會自動增加對應(yīng)圖元。
- 若有修改的數(shù)據(jù)筹淫，則會自動更新對應(yīng)圖元栖忠。
- 若有刪除的數(shù)據(jù)，則會自動移除對應(yīng)圖元贸街。
Data-Join – 用函數(shù)設(shè)置圖元屬性
d3.select('rect').attr('attrbuteName', 'value')
- 通過函數(shù)設(shè)置屬性，函數(shù)的輸入為綁定的數(shù)據(jù)狸相，返回值為圖元得到的屬性值
d3.selectAll('rect').attr('width', (d, i) => d.age * 1000 )
