two dimensions brush in d3 v4

Question

I have a problem with converting d3 v3 to d3 v4

I have this code :

  var brush = d3.svg.brush()
      .x(x)
      .y(y)
      .on("brushstart", brushstart)
      .on("brush", brushmove)
      .on("brushend", brushend);

but I don't know how to write it in v4

I tried

 var brush = d3.brush()
      .brushX(x)
      .brushY(y)
      .on("brushstart", brushstart)
      .on("brush", brushmove)
      .on("brushend", brushend); 

but it doesn't work

NB: Im using the package npm: "d3-brush": "^1.0.4",

Answer 1

That is the correct behavior. Reading the docs , one notices, that d3.brush() on its own will do the job of creating a two-dimensional brush:

# d3. brush () <>

Creates a new two-dimensional brush.

Hence, there are no methods brush.brushX() nor brush.brushY() on the created brush. The methods d3.brushX() and d3.brushY() would create a one-dimensional brush instead.

Therefore, your code would end up like the following:

var brush = d3.brush()
  .on("start", brushstart)
  .on("brush", brushmove)
  .on("end", brushend);