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 <i> 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:

<text>&#xf083</text>

Translating this into d3 then becomes:

<style>
  .symbol {
    font-family: FontAwesome;
    font-size: 16px;
   }
</style>

<script>
  var t = svg.append("g")
    .selectAll(".symbol")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "symbol")
    .html(function(d,i){
      return "&#xf083";
    })
    .attr("x", function(d, i) {
      return x(d.x);
    })
    .attr("y", function(d, i) {
      return y(d.y);
    });
</script>

Here's a similar answer I gave about Highcharts.

See d3.js example here.

Answer 2

var image = ;//image link

Give the link to your image above

point.append("image")
    .attr("xlink:href", image)
    .attr("x", -12)
    .attr("y", -12)
    .attr("width", 24)
    .attr("height", 24)
    ;

Make sure you give it attributes : x/y, width/height