How to add icons to D3 axis

Question

I am trying to add a locked or unlocked icon next to each tick on my axis. I want to use font awesome icons. It looks like it adds the HTML for the icons to the ticks, but the icons don't show up.

 var bonus_penalties = [{"key": 5, "awarded": "y"}, {"key": -13, "awarded": "y"}, {"key": 25, "awarded": "y"},
                        {"key": 0, "awarded": "n"}, {"key": 5, "awarded": "n"}, {"key": 12, "awarded": "n"},
                        {"key": 34, "awarded": "n"}];

var bpAxisScale = d3.scale.linear()
        .domain([0,6])
        .range([bottom- 45, 45]);

var bpAxis = d3.svg.axis()
        .scale(bpAxisScale)
        .orient('right')
        .tickFormat(function(d) { return bonus_penalties[d]});

bp_axis.selectAll("text")
    .style('fill',  function(d) {
    if(bonus_penalties[d].key == 0){
        return 'black';
    } else if(bonus_penalties[d].key < 0){
        return 'red';
    } else {
        return 'green';
    }
})
.attr('font-size',"10px")
.style("text-anchor", "middle");

bp_axis.selectAll(".tick")
                    .html(["<i class = 'fa fa-lock'></i>"]);

see [Adding FontAwesome icons to a D3 graph](http://stackoverflow.com/questions/18416749/adding-fontawesome-icons-to-a-d3-graph) and [font awesome icons](http://stackoverflow.com/questions/29081399/how-do-i-display-an-icon-at-a-point-on-a-line-chart-using-d3-js/29085385#29085385) — Mark, Mar 25 '15 at 16:28

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

I'm working on the same problem at the moment. It looks to me like SVG doesn't support CSS generated content, so rather than applying the FontAwesome class, you'll want to apply the icon font-family directly and include the unicode character for the icon as text.

See this example: https://stackoverflow.com/a/19385042/1651713

edited May 23 '17 at 10:24

Community

1
1

answered Mar 25 '15 at 16:45

richardwestenra

948
2
10
16

How to add icons to D3 axis

1 Answers1