D3.js柱状图Y轴问题：数据量少时条形与Y轴标签错位如何解决

问题根源 #

错位来自scaleBand比例尺的动态高度和硬编码的条形参数不匹配：
d3的scaleBand会根据当前数据条数自动计算每个分类对应的区块高度，你目前硬编码了条形高度为20、Y轴偏移10，只有数据量足够多、自动计算的区块高度接近30时才会刚好对齐；数据量少时区块高度远大于30，就会出现条形和标签错位的情况。
另外你当前的填充色判断逻辑存在冲突：第一个判断d.value > 1已经覆盖了第二个判断d.value > 1 && d.value < 4的所有场景，第二个分支永远不会触发，可根据实际需求调整判断顺序。

修复方案 #

修改以下两处代码即可：

1. 给Y轴的scaleBand增加内边距配置，适配不同数据量下的条形间距

// Y axis
var y = d3.scaleBand()
    .range([0, height])
    .domain(data.map(function (d) { return d.name; }))
    .padding(0.2) // 新增，分类间内边距可根据视觉需求调整，范围0-1

2. 替换硬编码的条形Y坐标和高度，直接用比例尺自带的bandwidth()获取动态高度

//Bars
svg.selectAll("myRect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", 4)
    .attr("y", function (d) { return y(d.name); }) // 移除手动加的10偏移
    .attr("width", function (d) { return x(d.value); })
    .attr("height", y.bandwidth()) // 替换硬编码的20，使用动态计算的条形高度
    .attr("fill", function (d) {
        // 调整判断顺序，避免分支不生效
        if (d.value >= 4) {
            return "rgb(51, 80, 92)";
        }
        else if (d.value > 1 && d.value < 4) {
            return "rgb(118, 161, 179)"
        }
        else {
            return "rgb(171, 209, 224)";
        }
    })

修改后无论数据量多少，条形都会自动和对应Y轴标签对齐。

内容的提问来源于stack exchange，提问作者user10981554