Tout à la souris

Brushes can be used to draw a barchart. This gives an easy way to input or adjust values with the mouse !!! The d3 brush is a complex piece of logic taking care of events and user feed-backs. Among other characterics it exposes a nice selection rectangle which can be used as a bar !!!

2D-brushes come in two flavors see official API v4 doc

  • d3.brushX()
  • d3.brushY()

Let's try both of them on this example.

Code comments

Source code can be examined and modified thanks to the great Blockbuilder

Code is made of:

  • CSS
  • a data definition in the form of an array of objects: index:2, value: 23.34, ...
  • two almost identical barchart generators (horizontal/vertical) allowing to drag a bar to a new value
  • a refresh function which propagates data updates into the two barcharts

Enjoy !!

technology
d3
Partager ce Billet