D3.js如何根据绑定的数据值动态设置图表元素的背景色

你提到的条件判断逻辑是可行的，也可以用D3内置的颜色比例尺实现更顺滑的深浅效果，操作前先注意两个要点：

1. 你当前示例数据里的value是字符串格式，使用前要转成数字，避免比较、计算逻辑出错
2. SVG矩形元素设置填充色用fill属性，不是backgroundColor

方法1：分段条件判断（符合你提到的写法思路） #

注意调整判断顺序，范围更小的条件放在前面，避免提前命中大范围判断导致逻辑失效：

// append rects部分修改如下
bars.append("rect")
    .attr("class", "bar")
    .attr("y", function (d) {
        return y(d.name);
    })
    .attr("height", y.rangeBand())
    .attr("x", 0)
    .attr("width", function (d) {
        return x(+d.value); // 转成数字计算宽度
    })
    // 新增填充色设置
    .attr("fill", function(d) {
        const score = +d.value;
        if (score <= 3) return "#ffcccc"; // 低分浅粉色
        else if (score <= 6) return "#ff6666"; // 中等分数粉色
        else return "#cc0000"; // 高分深红色
    });

方法2：D3线性颜色比例尺（更推荐） #

不需要手动写多段判断，颜色会根据分数自动线性变化，得分越高颜色越深：
首先和x、y比例尺一起定义颜色比例尺：

var colorScale = d3.scale.linear()
    .range(["#ffcccc", "#cc0000"]) // 值域对应从浅到深的颜色
    .domain([0, d3.max(students, d => +d.value)]); // 定义域对应分数从最低到最高

然后在rect属性设置里直接调用比例尺即可：

.attr("fill", d => colorScale(+d.value))

如果需要先对数据按分数排序，在定义所有比例尺前先对数组做排序处理即可：

// 按分数从高到低排序
students.sort((a, b) => +b.value - +a.value)

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