How to .move() a selected brush?
Clash 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>
.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.
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