最终效果
案例源码
<!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 data = [3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48],
svgWidth = 500,
svgHeight = 300,
rectWidth = 25,
rectGap = 5, // 矩形间的间距
textBottom = 10, // 文字距下方的距离
// 向body中添加svg节点
svg = d3
.select('body')
.append('svg')
.attr('width', svgWidth)
.attr('height', svgHeight);
// 在本例中，使用比例尺，可以由d3推算传入的值，在svg中应该渲染的高度
const scale = d3
// 线性比例尺
.scaleLinear()
// 定义域（使用scale时，传入的值在domain范围内，则d3推算输出range范围内的数据）
.domain([0, d3.max(data)])
// 值域(最大渲染到svg的高度)
.range([d3.min(data), svgHeight]);
const g = svg
// 找到svg下的所有g标签，对其进行添加/删除等操作，都是对svg下的所有g标签进行操作
.selectAll('g')
// 加载多个数据
.data(data)
// enter和append一起使用，可以在标签数量少于数据数量时，添加标签，直到标签数量和数据数量一致
// 下面的操作，都是给追加的
.enter()
.append('g');
// 给每个g标签添加矩形
g.append('rect')
.attr('width', rectWidth)
// d是数据中的每个元素
.attr('height', (d) => scale(d))
// i表示数据索引
.attr('x', (d, i) => i * (rectWidth + rectGap))
// 怎么让矩形从底部向上开始？ 让纵轴方向向下偏移到最大纵轴的位置，但是减去自己的高度
.attr('y', (d) => svgHeight - scale(d))
// 矩形填充色
.style('fill', 'skyblue');
// 给每个g标签添加文字
// 给rect节点添加文字，看不到效果
// NOTE 如果要在rect节点上显示文字，需要将text节点添加为rect的平级节点，并设置其x，y属性值
g.append('text')
.attr('font-size', '12px')
// text-anchor默认值是start，对中文和数字来说是右对齐
.attr('text-anchor', 'middle')
// 调整文字在x轴的位置。在矩形位置的基础上，再加上矩形宽度的一半
.attr('x', (d, i) => i * (rectWidth + rectGap) + rectWidth / 2)
.attr('y', (d) => svgHeight - textBottom)
.text((d) => d);
</script>
</body>
</html>
知识点总结
怎么给rect节点添加文字？
目前直接给rect中添加text节点是没有效果的。
想要给rect添加文本，目前只能用g标签同时包裹rect和text节点，并将text节点的位置，设置到rect节点的上边。结构就像这样
怎么让矩形的起点看起来在下边？
因为所有矩形开始时的y属性值都是0,所以初始画面是所有的矩形看起来都是自上而下开始的，就像这样，并不是想要的最终结果。
想要矩形的起点看起来在下边，可以给矩形的y属性值设为svgHeight - 矩形的实际高度，这样就能使矩形起点的的显示效果看起来在下边。
怎么样让文字在矩形的中间显示？
因为rect节点和text节点平级显示，可以给text节点的y属性值设为svgHeight - 一些自己觉得适合的高度,让文本在矩形的起点附近显示；给text节点的x属性值设为矩形的x属性值 + 矩形宽度的一半，但是这样的效果如下，文字有些偏右，不合预期。
在上面的基础上可以给text节点添加text-anchor: start | middle | end;属性，指定文本的对齐方式。为了让文本居中，可以使用text-anchor: middle;,即可达成效果。
一个注意点
当text-anchor值为start时，经本人测试后，认为其是右对齐。具体使用方式可参考MDN