Interactive SVG Charts With D3 – Part 2
Interactive SVG Charts With D3 – Part 1
D3: Getting Interactive With Your SVG ElementsIn my previous two articles about D3, I wrote about what D3 is (and is not) and data binding. This month we’ll begin exploring user interaction with elements on a SVG canvas. We’ll progress over a series of “slides,” each showing an active SVG...
D3: Binding Data
In my previous article, Meet D3: Data Driven Documents, I discussed my experience learning D3, in particular, discovering what D3 is not: it is not, strictly speaking, a SVG library. You will not find a function in the library to draw a circle or rectangle. Instead, you use its powerful selections interface to manipulate the DOM.
For example, assuming the DOM contains this element:
If we want to add a green circle with radius 10px at point (100,100), there is no draw-a-circle function in D3. Instead we do this: