In the last article we learnt about svg, svg shapes and basic line generator using d3js and why path is used for generating lines.
In this article we will learn about path data and how we can make any shape we want with it. It is not necessary to learn about the path data if you want to just learn d3js, you can skip this part as this sometimes become too confusing to pickup the concepts and it just helps you in understanding what goes on in the background when you make a path.
Lets take a simplest example making a line
The data we passed to path is M100,100 L400,400.
Path data always starts with M means move, from which point you want to start drawing, every co-ordinate take two point x and y. We gave M100,100 which starts from 100,100 co-ordinates of the svg. There is also lowercase m which moves according to its relative parent instead of svg. After that we have L400,400 representing line and its co-ordinates, line is drawn from the start point of M or m. Lower case l takes points from its parent instead of svg.
Similarly we have
- Move M m
- Line L l
- Horizontal H h => To draw a line horizontally
- Vertical V v => To draw a line Vertically
- Close path Z => joins the start and end points with a line
Here are some examples of Horizontal, Vertical and Close Path
And to make curves we have, I have built some visualizers to make it easy to understand. Play with the slider and see which values effects which part of the curve.
- Cubic Bézier
- C, c
- S, s
- Quadratic Bézier
- Q, q
- T, t
- Elliptical arc
- A, a
https://dev.to/saikiran/d3js-fundamentals-part-4-scales-18og
Top comments (0)