How to .move() a selected brush?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



How to .move() a selected brush?



TL;DR: how do you move d3.select('#a_brush')?


d3.select('#a_brush')



I have brushes inside <g> groups called axes. Each <g> axis contains a d3 axis and a d3 brush. In an update selection on axes, I want to update the d3 axis and brush.


<g>


axes


<g>


axes


axes.each(function (d) d3.select(this).select('.axis').call(d3.axisBottom(d[1])) );
axes.each(function (d) d3.select(this).select('.brush').call(brush.move, f(d)) );



In the above, axes is an update selection. Assume f(d) yields an appropriate array. The first of the two lines works, but the second throws:


axes


f(d)


Uncaught TypeError: Cannot read property 'move' of undefined



That might be because there's no variable I've saved anywhere called brush. I'm hoping to call the .move method directly on the selection without having to save a brush variable.


.move



What is the appropriate nomenclature to move the brush in the selection


axes.each(function (d) { d3.select(this).select('.brush') ?? ... somehow move the brush to f(d) ...


.call(brush.move


brush


d3.select(this).call(d3.event.target.move,




1 Answer
1



You definitely should define a variable (or a constant) for your brush, like:


const brush = d3.brush();



That way, you don't need to customise the extent and other parameters every time. However, if for whatever reason you really don't want to do that, just change brush for d3.brush():


brush


d3.brush()


d3.select(this).select('.brush').call(d3.brush().move, f(d))



Here is a basic demo, click the button to move the brush:




const svg = d3.select("svg");

const g = svg.append("g");

g.call(d3.brush());

d3.select("button").on("click", function()
g.call(d3.brush().move, [
[100, 0],
[400, 100]
])
)


svg
background-color: wheat;


<script src="https://d3js.org/d3.v5.min.js"></script>
<button>Click</button>
<br>
<svg width="500" height="100"></svg>





the reason I don't save the brush to a variable is because I have many brushes, defined in an enter selection: .each(function (d) d3.select(this).call(d3.brushX().extent(...).on("start", brushstart).on("brush", brush).on("end", brushend) ) ). Should I be making an array or object of brushes to hold onto them?
– Alex Lenail
Aug 10 at 13:03



.each(function (d) d3.select(this).call(d3.brushX().extent(...).on("start", brushstart).on("brush", brush).on("end", brushend) ) )





Yes, you should.
– Gerardo Furtado
Aug 10 at 22:00






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS