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
Let's try both of them on this example.
Source code can be examined and modified thanks to the great Blockbuilder
Code is made of:
- 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