d3js.org v5.9.2
之前只是各個部分的demo,現在將各部分整合起來,發現還是學到了不少東西
主要是加深了對scale(比例尺)的理解
代碼
樣式及數據
先是樣式
<style>
rect {
fill: pink
}
text {
font-size: 10px;
}
</style>
接着是數據及柱狀圖寬高等
const
data = [3, 6, 10, 25],
barWidth = 100,
barHeight = 300,
padding = { //svg留白用
top: 100,
right: 100,
bottom: 100,
left: 100
};
創建比例尺
實踐之後對比例尺與座標軸的理解加深了一點
let barScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, barHeight]),
yAxisScale = d3.scaleLinear().domain([d3.max(data), 0]).range([0, barHeight]),//y軸使用線性比例尺,注意domain輸入域
xAxisScale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, (barWidth - 1) * data.length]); //x軸使用scaleBand比例尺
barScale用於柱形圖創建
yAxisScale用於y軸創建,注意domain()的輸入域,否則刻度數值大小排列會相反
xAxisScale用於x軸創建,使用scaleBand序數比例尺
之前對比例尺的理解太過膚淺,這裏也做了幾個小實驗
console.log(`barScale(0):` + barScale(0));
console.log(`yAxisScale(0):` + yAxisScale(0));
console.log(`xAxisScale(2):` + xAxisScale(2));
顯示如下
對於barScale
與yAxisScale
,輸入域相反,所以映射相反,把一篇他人很棒的總結放於文末
創建柱狀圖
let barContainer = d3.select('.chart')
.attr('width', data.length * barWidth + padding.left + padding.right)
.attr('height', barHeight + padding.top + padding.bottom)
.selectAll('g')
.data(data).enter().append('g')
.attr('transform', (d, i) => {
return 'translate(' + (padding.left + i * barWidth) + ',' + (padding.top + barHeight - barScale(d)) + ')'
});
barContainer.append('rect')
.attr('height', d => barScale(d))
.attr('width', barWidth - 1);
barContainer
.append('text')
.text(d => d)
.attr('y', 10)
.attr('x', barWidth / 2 - 5);
這裏使用了之前定義的padding對象的值進行部分留白
創建座標軸
/**
* 創造y軸
*/
let yAxis = d3.axisLeft(yAxisScale);
d3.select('.chart')
.append('g')
.attr('transform', 'translate(' + (padding.left - 10) + ',' + padding.top + ') ')
.call(yAxis);
/**
* 創建X軸
*/
let xAxis = d3.axisBottom(xAxisScale);
d3.select('.chart')
.append('g')
.attr('transform', 'translate(' + (padding.left) + ',' + (padding.top + barHeight) + ')')
.call(xAxis);
最後創建座標軸
總結
對之前學的東西做了一次結合,還有很多地方待提升
不足請大佬指出