CODEWITHSUNDEEP
chartsd3.jsselection
SolessChong
SolessChong

Reputation: 3407

How do I brush chart nodes in a D3 SVG?

In D3, we have brush mechanism on one axis of a plot.

Now I have a scatterplot in an SVG where each node stands for a user. I want to brush on this SVG to select adjacent users. How could I build such a "brush" operation?

Upvotes: 0

Views: 2149

Answers (1)

Anko
Anko

Reputation: 6326

So you want a 2D brush component?

enter image description here

Here's a good example, as pictured above. The take-home part:

var brush = d3.svg.brush()
  .x(x)
  .y(y)
  .on("brushstart", brushstart)
  .on("brush", brushmove)
  .on("brushend", brushend);

Calling the x and y setters on a brush component with your horizontal and vertical scales makes it resizeable in both dimensions.

As usual, you can call the brush component to render it into an element:

cell.call(brush);

Upvotes: 2

Related Questions