javascript - Adding custom brush handles in D3 V4? -

i'm trying add custom elements handles of brush in d3 project i'm working on — the desired final result here — , i've been stymied d3 v4's move <g> elements brush handles <rect> elements. v4 docs can add, remove, or modify brush handles using .handle--* class, haven't been able work. example, when invoke:

const brushcontainer = d3.select('#brushcontainer'); brushcontainer.call(d3.brushx()); brushcontainer.selectall('.handle').remove(); brushcontainer.append('rect')   .attr('class', 'handle handle--w'); 

i following error:

typeerror: undefined not object (evaluating 'd.type') 

note wouldn't expect above code work, haven't been able find working examples, or clues in docs or source.

edit: had idea of appending required <g>s independently, changing x attributes d3.event.selection on brush. i'd able use <g>s handles, , approach leaves them without click handlers, if canonical right answer, i'll go ahead , that.

yes, supposed add , position handles independently brush event.

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