来源
总结
轴在左下角的对齐
纵轴比例尺渲染的最大高度 = 横轴在y方向的偏移量
横轴上刻度的间隔
本例中横轴使用的是离散比例尺，有padding()方法可以用来调整刻度间的间隔。
本例中使刻度的内外间隔保持一致。
csv数据
长这个样子
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
const svgWidth = 600,
svgHeight = 400,
margin = 120,
axisWidth = svgWidth - margin,
axisHeight = svgHeight - margin;
const svg = d3
.select('body')
.append('svg')
.attr('height', svgHeight)
.attr('width', svgWidth);
// 纵轴比例尺
const yScale = d3.scaleLinear().range([axisHeight, 0]);
// 横轴比例尺
const xScale = d3.scaleBand().range([0, axisWidth]).padding(0.4);
// 创建组元素，调整图表在svg中的位置
const g = svg.append('g').attr('transform', 'translate(50, 50)');
d3.csv('../bar_data.csv').then((data) => {
xScale.domain(data.map((d) => d.year));
yScale.domain([0, d3.max(data, (d) => d.value)]);
// 添加横轴
g.append('g')
.attr('transform', `translate(0, ${axisHeight})`)
.call(d3.axisBottom(xScale));
// 添加纵轴
g.append('g').call(d3.axisLeft(yScale));
// 添加柱形
g.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', (d) => xScale(d.year))
.attr('y', (d) => yScale(d.value))
.attr('width', xScale.bandwidth())
.attr('height', (d) => axisHeight - yScale(d.value))
.attr('fill', 'green');
});
</script>
</body>
</html>