如何将图标添加到 D3 轴

Question

我正在尝试在轴上的每个刻度旁边添加一个锁定或解锁图标。我想使用很棒的字体图标。看起来它为图标添加了 HTML 到刻度线，但图标没有显示。

 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>"]);

Answer 1

我现在正在处理同样的问题。在我看来 SVG 不支持 CSS 生成的内容，因此与其应用 FontAwesome class，不如直接应用图标字体系列并包含图标的 unicode 字符作为文本。

看这个例子：

如何将图标添加到 D3 轴

How to add icons to D3 axis

javascript

html

d3.js

font-awesome