d3/d3-brush

Brush with handle

sepans opened this issue · 4 comments

sepans commented

Trying to follow this example to add handle to the brush using:

brushEl.selectAll(".handle").append("path").attr("d", _handlePath)  //_handlePath generates the handle graphic

The path doesn't show up since .handle element is a rect instead of g. As soon as I change the d3-brush source code here to handle.enter().append("g") it works.

Am I doing something wrong or the .handle needs a wrapping g?

Thank you

mbostock commented

The example you’ve linked uses the v3 API. The structure of the brush changed in v4, as documented in the README. You can still add custom elements to the brush, but you should add them to the brush element itself, rather than adding it to the handle element. In addition, in v4 you are responsible for repositioning your handle whenever the brush moves (typically by listening for brush events); you can no longer rely on the brush moving custom handle elements for you. For interaction, you must also bind a data object with the appropriate type field (e.g., {type: "e"} for a left-edge handle) to any custom elements you add to the brush.

Fil commented

Here's a d3 v4 port of Mike's block
http://bl.ocks.org/Fil/013d52c3e03aa7b90f71db99eace95af

Bottom line: everything has changed.

  • extent() doesn't mean the same thing as before
  • getting the current values is different (you need to read it from the node that contains it, it's not in the brush itself anymore. Because a brush is now a factory that you apply to a selection (similar to d3.axis).
  • I couldn't see how to pass a scale, and had to apply it myself (am I missing something?)
  • you effectively need to move and possibly hide/show the handles yourself during the brush event

This was certainly the most difficult port to d3 v4 I've done.

mbostock commented

Prodded by @Fil, I have updated my own example to v4. http://bl.ocks.org/mbostock/4349545

sepans commented

Thank you.