brush.extent does not appear to resize the invisible overlay about d3-brush

[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.