Question 214971 in Html Question posted in
Some basic documentation can be found here.

Html – Not able to change bar color through .css file

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    It seems like there’s a misunderstanding in the CSS class usage for SVG elements. Unlike regular HTML elements, SVG elements don’t use the "color" property to change the fill color of the bars.

    .bar {
  fill: steelblue;
}

    With this change, the bars should now appear with the "steelblue" fill color as you intended. The "fill" property in CSS is specifically used to set the fill color of SVG shapes like rectangles, circles, and paths.

    (if it didn’t work try applying !important after steelblue)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search