d3js.org v5.9.2
Before, it was just the demo of each part. Now when we integrate the parts, we find that we have learned a lot
It is mainly to deepen the understanding of scale

Code

Style and data

First, style.

<style>
    rect {
        fill: pink
    }
    text {
        font-size: 10px;
    }
</style>

Then data and histogram width and height

const
    data = [3, 6, 10, 25],
    barWidth = 100,
    barHeight = 300,
    padding = { //svg for white use
        top: 100,
        right: 100,
        bottom: 100,
        left: 100
    };

Create scale bar

After practice, the understanding of scale and coordinate axis has been deepened a little

let barScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, barHeight]),
    yAxisScale = d3.scaleLinear().domain([d3.max(data), 0]).range([0, barHeight]),//The y-axis uses a linear scale, paying attention to the domain input field
    xAxisScale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, (barWidth - 1) * data.length]); //Use scaleBand scale for x-axis

barScale for column chart creation
yAxisScale is used for y-axis creation. Pay attention to the input field of domain(). Otherwise, the scale values will be arranged in the opposite order
xAxisScale for x-axis creation, scaleBand ordinal scale
The previous understanding of scale is too superficial. Here are a few small experiments

console.log(`barScale(0): ` + barScale(0));
console.log(`yAxisScale(0): ` + yAxisScale(0));
console.log(`xAxisScale(2): ` + xAxisScale(2));

Shown below

For barScale and yAxisScale, the input field is the opposite, so the mapping is the opposite. Put a great summary of others at the end of the article

Create histogram

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

Here, the value of the padding object defined previously is used for partial blank

Create axis

/**
 * Create y axis
 */
let yAxis = d3.axisLeft(yAxisScale);
d3.select('.chart')
    .append('g')
    .attr('transform', 'translate(' + (padding.left - 10) + ',' + padding.top + ') ')
    .call(yAxis);
/**
 * Create X axis
 */
let xAxis = d3.axisBottom(xAxisScale);
d3.select('.chart')
    .append('g')
    .attr('transform', 'translate(' + (padding.left) + ',' + (padding.top + barHeight) + ')')
    .call(xAxis);

Last create axis

summary

I have made a combination of what I have learned before, and there is still a lot to be improved
Not enough, please point out

Reference material

Scale commonly used in D3
Complete column chart