In this chapter, we will explore some basic graphical building blocks provided by D3. In the previous chapters (Chapters 3 and 4), we learned how D3 manipulates the DOM tree in order to represent information visually, but we did not really concentrate on graphical objects. They will be the topic for the present chapter. This will also give us the opportunity to understand how different D3 facilities are structured and how they work together. We will also learn mechanisms to organize our own code for convenience and reuse.
SVG provides only a small set of built-in geometric shapes (like
circles, rectangles, and lines; see Appendix B). Anything else
has to be built up painstakingly (and rather painfully) either
from those basic shapes or by using the
<path> element and its turtle graphics command language. How does D3 assist with this?
To produce complex figures, D3 employs three different styles of helper functions. These can be distinguished by the scale they act on: generators generate individual attributes, components create entire DOM elements, and layouts ...