brush.extent does not appear to resize the invisible overlay

[SylvainCorlay]

We expect (maybe wrongly) that a call to brush.extent would resize the invisible overlay capturing mouse events but it does not appear to be the case.

Our usecase for making such a call is to adjust the overlay when the figure is resized. We also move the brush to correspond to the previously selected values.

[SylvainCorlay]

viewof selection = {
  // SVG width is set to 500 originaly
  const svg = d3.select(Object.assign(DOM.svg(500, 100), {value: null}))
                .style("border", "solid 1px black");
  const brush = d3.brushX();
  const g = svg.append("g").call(brush);
  svg.select(".overlay").style("fill", "yellow");
  // Changing width of svg to 800
  svg.attr("width", 800);
  // Update extent of brush to new size
  brush.extent([[0, 0], [800, 100]]);
  // Move brush beyond previous extent
  brush.move(g, [500, 600]);
  yield svg.node();
}

// Now try dragging the selection

[mbostock]

You need to re-render the brush after you reconfigure it using selection.call(brush). The brush object doesn’t retain any reference to the selection you bind it to, so the only way to change the displayed state of the brush is to re-render it with brush or brush.move.

[SylvainCorlay]

You need to re-render the brush after you reconfigure it using selection.call(brush). The brush object doesn’t retain any reference to the selection you bind it to, so the only way to change the displayed state of the brush is to re-render it with brush or brush.move.

Thanks. This is what we ended up doing. We though it was unintended behavior.

[jwasilgeo]

Thanks, this brush re-rendering suggestion helped me out too in a similar situation.