D3 to CSS color for stacked bar graph

Question

I am trying to implement color in stacked bar chart in D3 using CSS. Right now in D3 we are creating the bar chart using enter, update, exit using color like below. The i in the code is the index.

    var stackedBarEnter = stackedBar.enter()
        .append('g')
        .attr('class', function(d,i) {
            return 'stacked bar color-'+i;
});

In CSS I have tried different things: .rect stacked bar color-[0] rect { fill:red; }

Is there anything I am doing wrong, or any suggestions regarding how I could fill color in CSS? We were told previously that we should be doing it just like this pseudo-code: {fill: red;}

I don't think the fill class can be applied to the g element in svg; it would however propagate to the children(source). — Hugues Stefanski

pmkro pmkro · Accepted Answer · 2017-12-01T19:50:09

In your current little code blurb you don't have a .rect class to select. Try using g .stacked .bar .color-[0] {fill:red;}

D3 to CSS color for stacked bar graph

1 Answers