d3.js 建立完整柱形圖

d3js.org v5.9.2
以前只是各個部分的demo，如今將各部分整合起來，發現仍是學到了很多東西
主要是加深了對scale（比例尺）的理解

代碼

html、樣式及數據

html

<svg class="chart"></svg>

樣式

<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);

最後建立座標軸

總結

對以前學的東西作了一次結合，還有不少地方待提高
不足請大佬指出

參考資料

D3中經常使用的比例尺
完整的柱形圖