Question

我想在C3图表图例上为每个实例添加一个不同的Font Awesome图标。

到目前为止看起来我必须使用unicode，我已经找到了如何为D3图表做到这一点，但我不确定如何传输该信息。

我的代码看起来像这样......

var eventChart = c3.generate({
    bindto: '#eventChart',
    data: {
        columns: [
            ['A', -1, -1, -1, -1, -1, 0],
            ['B', 1, 0, 1, 0, 1, 1],
            ['C',  -1, 0, -1, 0, -1, -1]
        ],
         axes: {
            A:'y2',
            B: 'y2',
            C: 'y2',
             },
        type: 'bar',
    legend: {
        position: 'right',
         }
    },
   }
});

D3图表示例如下

node.append('text')
.attr('font-family', 'FontAwesome')
.attr('font-size', function(d) { return d.size+'em'} )
.text(function(d) { return '\uf118' }); 

graph.json#
{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1}, 
{"name":"Mlle.Baptistine","group":1}, 
{"name":"Mme.Magloire","group":1}]}

谢谢

Answer 1

以下是我发现有效的代码。

var eventChart = c3.generate({
bindto: '#eventChart',
data: {
    columns: [
        ['A', -1, -1, -1, -1, -1, 0],
        ['B', 1, 0, 1, 0, 1, 1],
        ['C',  -1, 0, -1, 0, -1, -1]
    ],
     axes: {
        A:'y2',
        B: 'y2',
        C: 'y2',
         },
    type: 'bar',
legend: {
    show:false,
    position: 'right',
     }
},

} }）;

d3.select('.container').insert('div','.eventChartlegend')
.attr('class', 'eventslegend').selectAll('span')
.data( ['A', 'B', 'C'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.html(function (id) { return id; })
.each(function (id) {
    if(id === "A") {
        d3.select(this).style('color', 
eventChart.color(id)).attr('class',"fas fa-bug");
    } else if(id === "B") {
         d3.select(this).style('color', 
eventChart.color(id)).attr('class',"fas fa-procedures");
    } else if(id === "C") {
         d3.select(this).style('color', 
eventChart.color(id)).attr('class',"fas fa-cog");
     } else {
        d3.select(this).style('color', eventChart.color(id))
     }
})

---- legend.css -------

.eventslegend span{
width: 33.333333%;
cursor: pointer;
color: white;

}

在C3图表图例上为每个实例添加字体真棒图标

1 个答案: