How do I display an icon at a point on a line chart using d3.js

Question

I am creating a simple line chart using d3, ... but instead of the standard points along the path, I\'d like to display a fon-awesome icon such as \'fa-arrow-up\'.

I\'ve

Answer 1

Under the hood, FontAwesome and libraries like it are just setting the CSS content of their tag to a unicode character from their font family.

If you inspect an icon ::before you'll see something like this:

.fa-camera-retro:before {
  content: "\f083";
}

In SVG this would be equal to:



Translating this into d3 then becomes:

Here's a similar answer I gave about Highcharts.

See d3.js example here.