內(nèi)容要點(diǎn)
- d3圖表的一些更為復(fù)雜的操作，希望此次的學(xué)習(xí)內(nèi)容可以在之后的分享里面為大家提供一些繪圖和可視化操作上的思路，并且希望得到大家的指正和建議
內(nèi)容詳情
-
三種類型的圖表繪制
image.png
三個(gè)圖表對(duì)應(yīng)的代碼鏈接如下:
圖1
圖2
圖3
- 相關(guān)的api記錄（上一次學(xué)習(xí)總結(jié)中的api不再仔細(xì)介紹）
- d3.extent(array[, accessor])
用于求解范圍，分別有兩個(gè)參數(shù)，為數(shù)組array與讀取數(shù)據(jù)的函數(shù)accessor，如果沒有設(shè)置accessor，則直接從array中找到最大值最小值，作為輸出范圍，如果有accessor，則根據(jù)accessor函數(shù)自定義訪問array中的數(shù)據(jù)。例如：
let x = d3.scaleTime()
.domain(d3.extent(data, d => new Date(d.date)))
.range([margin.left, width - margin.right]);
定義域domain函數(shù)中，d3.extent(data, d => new Date(d.date))表示我們需要從data數(shù)組中的讀取每一個(gè)數(shù)組元素的date屬性值，找出所有date中的最大值最小值作為最后輸出的范圍。
d3.max(array[, accessor])
顧名思義，找到數(shù)組中的最大值，accessor同樣是數(shù)據(jù)訪問自定義方式。pow.nice()
將輸入范圍擴(kuò)展到漂亮的整數(shù)，如圖一展示的縱坐標(biāo)的范圍就是通過nice調(diào)整到合適的范圍，這個(gè)函數(shù)可以說是非常人性化了，不需要我們手動(dòng)的計(jì)算合適的計(jì)數(shù)范圍。ticks
從比例尺的 domain 中返回具有代表性的日期刻度。但是此處還有一些細(xì)節(jié)的東西，需要詳細(xì)描述，參考-
tickSizeOuter
外側(cè)刻度大小
image.png
在頂部的三個(gè)圖中，外側(cè)刻度均設(shè)置為0。
clone
復(fù)制元素。
圖2可以看到在縱坐標(biāo)處有一個(gè)我的步數(shù)的縱坐標(biāo)圖例。此處的圖例text元素就是通過復(fù)制最頂部的縱坐標(biāo)刻度14000得到的，重新設(shè)置xy位置，并填入新的文本，即可制作縱軸指示圖例。此處參考了d3畫廊observable上大師們的做法。大師的作品defined
缺省訪問器,使用方式如下圖。在編寫折線生成器的時(shí)候，過濾掉份非數(shù)字的坐標(biāo)，可以有效的防止圖線斷裂或繪制失敗的情況發(fā)生。
let line = d3.line()
.defined(d => !isNaN(d.value)) // 防止出現(xiàn)非數(shù)字值導(dǎo)致的圖線斷裂
.x(d => x(new Date(d.date)))
.y(d => y(d.value));
- call（熟悉的call/apply/bind）
- tickFormat
- d3.timeFormat
（坐標(biāo)的自定義顯示格式，此處用在了橫坐標(biāo)時(shí)間的格式化上，可以看到頂部三個(gè)圖的橫軸時(shí)間格式是不同的）
// 圖2
let xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
.tickFormat(d3.timeFormat('%Y-%m-%d'))
)
.call(g => g.selectAll('.tick text')
.attr('y', 10)
.attr('x', 30)
.attr('transform', 'rotate(25)')
);
// 圖3
let xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
.tickFormat(d3.timeFormat('%Y年%m月%d日'))
)
.call(g => g.selectAll('.tick text')
.attr('y', 10)
.attr('x', 30)
.attr('transform', 'rotate(25)')
);
