Introduction to the code for creating a complete column chart using d3.js

This article brings you an introduction to the code for creating a complete column chart using d3.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

d3js.org v5.9.2

Before, it was just a demo of each part. Now I have integrated all the parts and found that I have learned a lot

Mainly to deepen my understanding of Understanding scale

Code

Style and data

First the style

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

Then the data and histogram width and height

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

Create the scale

After practice, my understanding of the scale and the coordinate axis has 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]),//y轴使用线性比例尺，注意domain输入域
    xAxisScale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, (barWidth - 1) * data.length]); //x轴使用scaleBand比例尺

barScale is used to create the column chart
yAxisScale is used to create the y-axis, pay attention to domain() input field, otherwise the scale value arrangement will be reversed
xAxisScale is used to create the x-axis, use scaleBand ordinal scale
My previous understanding of the scale was too superficial, and I also did a few small experiments here

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

Displayed as follows

For barScale and yAxisScale, the input domain is opposite, so the mapping is opposite, and the article is great The summary is at the end of the article

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

The value of the previously defined padding object is used to leave part of the blank

Creating the coordinate axis

/**
 * 创造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);

Finally create the coordinate axis

[Related recommendations: JavaScript video tutorial]

The above is the detailed content of Introduction to the code for creating a complete column chart using d3.js. For more information, please follow other related articles on the PHP Chinese website!