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) ) )

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.