Adding custom brush handles in D3 V4?

Question

I'm trying to add some custom elements to the handles of a brush in a D3 project I'm working on — the desired final result is here — and I've been stymied by D3 V4's move from <g> elements for brush handles to <rect> elements. The V4 docs say that you can add, remove, or modify the brush handles using the .handle--* class, but I haven't been able to get that to work. For example, when I invoke:

const brushContainer = d3.select('#brushContainer');
brushContainer.call(d3.brushX());
brushContainer.selectAll('.handle').remove();
brushContainer.append('rect')
  .attr('class', 'handle handle--w');

I get the following error:

TypeError: undefined is not an object (evaluating 'd.type')

Note that I wouldn't necessarily expect the above code to work, but I haven't been able to find any working examples, or any clues in the docs or the source.

Edit: I just had the idea of appending the required <g> s independently, then changing their x attributes to d3.event.selection on brush . I'd like to be able to use the <g> s as handles, and this approach leaves them without click handlers, but if this is the Canonical Right Answer, I'll just go ahead and do that.

Answer 1

Yes, you are supposed to add and position the handles independently with the brush event.

https://github.com/d3/d3-brush/issues/14