Adding text labels
If you are interested in the largest moons of Jupiter, you probably want to know their names. That information is available in the data object, but we need to place it somewhere in the chart and relate it to the corresponding moon. One solution is to assign a color to each moon and add a legend that relates the color to each name. Try that as an exercise! An alternative is to place the label beside the moon. In this section, we will demonstrate the second solution.
Unlike HTML, you can't just add text inside an SVG element. You have to create a <text> element and use its attributes to place the object in a coordinate system. Since the text is related to the circle, it's best to refactor our code and place each circle and ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access