Originally, I had created a single bar chart using SVG:
bars.append("rect")
.attr("x", midX)
.attr("y", 0)
.attr("width", function(d) { return x(d.values[0].value); })
.attr("height", y.bandwidth())
.classed("highlight", function(d) { return d.key == '15-0000'; })
This was accompanied by the following CSS styling:
rect {
fill: #ddd;
stroke: #000;
stroke-width: .5px;
}
.bar rect.highlight {
fill: #F0B27A;
stroke: #000;
stroke-width: .5px;
}
Later on, I added a completely different bar chart:
svg.selectAll("rect")
.data(barchartArray)
.enter().append("rect")
.attr("x", -300)
.attr("y", function(d,i) { return i*11+70})
.attr("width", function(d,i) { return d/1000; })
.attr("height", 10);
I am now wondering how to style this new chart in CSS without affecting the first one. For instance, how can I change the color of this chart to red without impacting the first chart? I understand that a class/id must be used, but I'm unsure of the exact formatting in CSS.