Not able to change bar color through .css file

Question

Here is all the javascript code I am using:

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;
    });
})

And this is the section of the .css file that is applicable:

.bar {
  color: steelblue;
}

However, when this runs, it creates a black bar instead of the steelblue as it is stated in the .css file. I've tried putting the css code directly within the base html file under the header, but this does not work either, so I am thinking this is an issue with the javascript code, but I am not sure where as I have tested quite a number of potential options. How do I go about fixing this?

Answer 1

Found the answer: I had to add the line

.attr("class", "bar")

to the function in order to create the class that could then be edited within the main .css file