How can I change the color of a D3 brush

Question

I seem unable to override the default (gray) colour of the D3 brush.

Here's a snippet that I think should work:

d3.select(this.$el).select('#brush');
    .style('fill', '#569fd5')
    .call(brush.on('end', brushended));

I'm expecting to see a pale blue brush area, but it remains gray. The entire body of the brush is pale blue instead:

https://i.stack.imgur.com/ziKGk.png

My google-fu fails me here. Any ideas?

Answer 1

Nvmd, I figured it out. Peace!

(just kidding...)

Based on this: https://observablehq.com/@sarah37/snapping-range-slider-with-d3-brush

Add this to your stylesheet:

rect.selection {
  fill: steelblue;
}