Placement of d3 brush resize groups

Question

I'm working on an issue I'm having when the brush extent is relatively small.

Right now, the groups that are created in a brush (g.resize [n,s,e,w,etc]) are placed by some internal action to the d3 brush.

<g class="resize n" transform="translate(111.77999877929688,120.05999755859375)" style="cursor: ns-resize;">
    <rect y="0" width="68.94" height="6" x="0" style="visibility: hidden;">
    </rect>
</g>

My issue is that for Horizontal sides (north and south), the group is put under the edge of the extent, and for vertical sides(east and west) the group is put to the right of the edge. The group using transform to place the itself within the svg. This means that my resize handle is inside the extent for the north and west edge. Therefore on small extents, the resize action is interfering with the click action that I want to have happen on the extent. I'd like to figure out how to make sure that the resize groups are always drawn on the outside of the extent.

I'd prefer not to add an adjustment on brush end (maybe also on brush move) to relocate the groups and adjust it's transform. Is there a way within the native d3 code to control how these are placed?

Also, how can I control the height of this rect to be something other than 6?

Answer 1

Assuming something like that :

var brushg = svg.append("g").attr("class", "brush");
var brush = d3.svg.brush();
brushg.call(this.brush);

Here is what you can do when the brush is rendered :

brushg.selectAll('.resize')
      .select('rect')
      .attr('height', '100');

Which modifies the height of you resize elements.