D3 - Add background fill to rect

Question

Is it possible to add a background fill to a rect element? I am using rect elements to create a bar graph. Each rect element has a width and fill set. I want to fill the remaining width with a color.

See here: http://codepen.io/jesouhaite08/pen/fhvzA

Thanks!

Answer 1

For best flexibility I would use other rectangles to draw the background for your bars, check the forked example: http://codepen.io/anon/pen/JnlAE

// Bars
svg_fun.selectAll('rect.background')
       .data(dataset)
       .enter()
       .append('rect')
       .classed('background', true)
       .attr('y', function(d, i) {return i * h_line; })
       .attr('x', 0)
       .attr('height', 20)
       .attr('width', function(d) {return scale_x(max_x);} )
       .attr('fill', 'red')

svg_fun.selectAll('rect.bar')
       .data(dataset)
       .enter()
       .append('rect')
       .classed('bar', true)
       .attr('y', function(d, i) {return i * h_line; })
       .attr('x', 0)
       .attr('height', 20)
       .attr('width', function(d) {return scale_x(d);} )
       .attr('fill', 'teal')