无法通过CSS修改D3.js条形图颜色的问题求助

问题描述 #

使用以下D3.js代码绘制条形图时，条形始终显示为黑色，而非设置的steelblue，即使将CSS放在HTML头部也无法解决：

D3.js代码 #

var marginEducation = {top: 20, right: 30, bottom: 40, left: 300},
widthEducation = 1000,
heightEducation = 460;

const svgEducation = d3.select("#Education")
    .append("svg")
    .attr("widthEducation", widthEducation + marginEducation.left + marginEducation.right)
    .attr("heightEducation", heightEducation + marginEducation.top + marginEducation.bottom)
    .append("g")
    .attr("transform", `translate(${marginEducation.left}, ${marginEducation.top})`);

d3.csv("csvData/DeveloperProfile/Education/Education.csv").then( function(data) {

console.log(data)

data.forEach(function(d) {
    d.EducationCount = +d.EducationCount;
});

const xEducation = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return d.EducationCount; }) * 1.25])
    .range([ 0, widthEducation]);
svgEducation.append("g")
    .attr("transform", `translate(0, ${heightEducation})`)
    .call(d3.axisBottom(xEducation).tickSize(0))
    .call(d3.axisBottom(xEducation).tickValues([]))
    .select(".domain").remove()

const yEducation = d3.scaleBand()
    .range([ 0, heightEducation ])
    .domain(data.map(function(d) { return d.EducationAnswer; }))
    .padding(0.2)

svgEducation.append("g")
    
    .call(d3.axisLeft(yEducation).tickSize(0))
    .call(d3.axisLeft(yEducation).tickPadding(30))
    .select(".domain").remove()

svgEducation.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("x", xEducation(0) )
    .attr("y", d => yEducation(d.EducationAnswer))
    .attr("width", d => xEducation(d.EducationCount))
    .attr("height", yEducation.bandwidth())

svgEducation.selectAll(".text")
    .data(data)
    .enter()
    .append("text")
    .text(function(d) {
    return d.EducationCount;
    })
    .attr("text-anchor", "middle")
    .attr("fill", "white")
    .attr("y", function(d, i) {
    return yEducation(d.EducationAnswer) + (yEducation.bandwidth()/2) + 4;
    })
    .attr("x", function(d) {
    return xEducation(d.EducationCount) + d.EducationCount.toString().length * 5;
    });
})

CSS代码 #

.bar {
  color: steelblue;
}

问题原因 #

• CSS属性错误：SVG矩形的填充颜色需要用fill属性，color属性仅控制SVG文本的颜色，对矩形无效。
• 未绑定类名：代码中通过selectAll(".bar")选择元素，但在创建矩形时未给元素添加bar类，导致CSS选择器无法匹配到条形。

修复方案 #

1. 修正CSS属性 #

将color替换为fill：

.bar {
  fill: steelblue;
}

2. 给矩形添加类名 #

在D3.js代码中，创建矩形后添加bar类：

svgEducation.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar") // 新增此行绑定类名
    .attr("x", xEducation(0) )
    .attr("y", d => yEducation(d.EducationAnswer))
    .attr("width", d => xEducation(d.EducationCount))
    .attr("height", yEducation.bandwidth())

额外优化（可选） #

代码中SVG的宽高属性名写错，需修正为标准的width和height，确保容器尺寸正确：

const svgEducation = d3.select("#Education")
    .append("svg")
    .attr("width", widthEducation + marginEducation.left + marginEducation.right) // 修正属性名
    .attr("height", heightEducation + marginEducation.top + marginEducation.bottom) // 修正属性名
    .append("g")
    .attr("transform", `translate(${marginEducation.left}, ${marginEducation.top})`);

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