What is the correct argument for d3.brushSelection()?

Question

I'm trying to get the selection values for a 1-dimensional brush, but I'm having trouble understanding what the argument for d3.brushSelection() should be. I see that the documentation says that the argument should be a node, but I don't know exactly what it means. Is it supposed to be the specific HTML element on which the brush is called on, or the svg element that holds the brush? I have tried both and both return null.

var xBrush = d3.brushX()
  .extent([[0,0], [xWidth,xHeight]])
  .on("brush", brushed);

xChart.append("g")
  .attr("class", "brush")
  .call(xBrush);

If this is how I create my brush, how could I get the value of the selection? Thanks.

Answer 1

The node desired in the argument for d3.brushSelection is the g element corresponding to your brush.

So you could access the selection either via

d3.brushSelection(d3.select(".brush").node())

or, with a slight change to your code,

var xBrush = d3.brushX()
  .extent([[0,0], [xWidth,xHeight]])
  .on("brush", brushed);

var theBrush = xChart.append("g")
  .attr("class", "brush")
  .call(xBrush);

d3.brushSelection(theBrush.node());

Note that if your brush's selection is empty, the function returns null.