Hi, when trying to create a brush, I am encountering errors. The error looks something like this:
Appreciate any help.
Can you please share a link to your code that is not working?
One thing that comes to mind is that the D3 API may have changed. See https://github.com/d3/d3-brush and https://github.com/d3/d3/blob/main/CHANGES.md for clues.
Curran, thanks so much for responding. I think I’m doing something wrong with your method. I found another developer who breaks it down simpler without React (link)
Oh very nice! Yes, I’ve been meaning to create a new video & example that deals with brushing in pure D3. That would be fun to do.
2 Likes
Curran, I finally figured out the issue! Your suggestion was right! I was getting a d3.event is undefined error. The problem was that we are now using d3v6+, where the implementation of brushed for brush.on has changed. More here.
So, I did the following and added the event as a parameter to the brushed function:
brush(select(brushRef.current));
brush.on('brush end', (event) => {
console.log(event.selection);
});
It was a dumb mistake I’d been making without referring the documentation clearly mentioning the change. Please let me know if ok to post as separate post so others who may face the same issue can take note. Link to code
Fantastic! Sure, post as separate post if you want to.
This is a very common struggle. One of the pain points with D3 in general is that a lot of the older examples (e.g. found in bl.ocks.org) are awesome, but don’t “just work” when you upgrade the D3 version to the latest. It often takes a lot of manual work to upgrade to newer APIs, and sometimes structural changes are required. But I suppose this is the price we pay for using a thoroughly well maintained library like D3 - the new APIs are in fact way better.
Thrilled that you were able to get it working!