有没有办法将 C3 图例项目图块更改为图标？

Question

我希望我的条形图为 have different coloured versions of the same icon for the legend tiles. I am currently using font-awesome 5 for text in my HTML document but I do not mind using other icon libraries if I must (as long as it's free). At the moment my graph has squares for the legend tiles，因为这是默认设置。在 font-awesome 中，我想要的图标是 class="fa fa-bar-chart"。图例图块的 class 称为 .c3-legend-item-tile

我尝试了来自 Use Font Awesome Icons in CSS but the code there didn't help change the legend tiles. Neither did Using Font Awesome icon for bullet points, with a single list item element

的代码

我不希望我的图标像中的示例那样浮动在条形图上方，我只希望图块从默认正方形变为图标。

https://jsfiddle.net/SharonM/k49gbs13/25/ 有一个我尝试过的粗略示例。（标签显示了我想要实际图块的样子，但我实际上并不想要标签）

.c3-chart-text .c3-text {
  font-family: 'FontAwesome';
}

.c3-legend-item-tile::before {
  font-family: 'FontAwesome';
  content: '\uf080'!important;
  font-weight: 900!important;
  margin: 0 5px 0 -15px!important;
}

我之前和之后都试过了，也只是 class 本身。

更新：

我也试过：

d3.select(string).insert('div', '.chart').attr('class', 'legend').selectAll('span')
    .data(this.allIDs)
    .enter().append('span')
    .attr('data-id', function (id) { return id; })
    .html(function (id) { return '<i class="fa fa-bar-chart" aria-hidden="true"> </i>'+ id; })
    .each(function (id) {
        d3.select(this).style('background-color', chart.color(id));
    })
    .on('mouseover', function (id) {
        chart.focus(id);
    })
    .on('mouseout', function (id) {
        chart.revert();
    })
    .on('click', function (id) {
        chart.toggle(id);
    });

其中字符串是我的容器的名称 class 但这根本没有达到我想要的效果。它在带有我想要的图标的一侧创建了新的 'legends'，但是在切换时绕过了我的 onclick 检查，我可以在此函数中重新实现它，但它看起来真的很糟糕。我宁愿把原来的小方块换成图标。

Answer 1

C3 版本 < 0.7

原来这样做并保持颜色的方法是对 .c3-legend-item-tile(s) 做一些事情。由于它们是矩形，因此您无法向其添加文本，但您可以在其上使用蒙版和图案来给人以文本的印象。

我的第一次尝试只是将 c3-legend-item-tiles 的填充样式替换为图案，其中图案是所需的文本字符。然而，这删除了颜色并仅将它们显示为黑色 - 不是很方便

事实证明，您可以做的是与填充样式分开添加遮罩，并在其中重复使用图案 --> How to change color of SVG pattern on usage?。在这里，我们将蒙版设置为一个矩形，它又使用该图案作为填充，嘿，'icons' 以正确的颜色出现，因为每个图块的填充样式保持原样...

https://jsfiddle.net/j2596x0u/

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250],
            ['data2', -50, 150, -150, 150, -50, -150],
            ['data3', -100, 100, -40, 100, -150, -50]
        ],

        type: 'bar',
        labels: {
//            format: function (v, id, i, j) { return "Default Format"; },
            format: {
                data1: function (v, id, i, j) { return "\uf080"; },
                data2: function (v, id, i, j) { return "\uf080"; },
                data3: function (v, id, i, j) { return "\uf080"; },
            }
        }
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    },
    onrendered: function () {
        d3.selectAll(".c3-legend-item-tile").attr("mask", "url(#iconMask)");
    }
});

d3.select("svg defs").append("mask")
    .attr("id", "iconMask")
    .attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1)
  .attr("maskContentUnits", "objectBoundingBox")
  .append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1)
  .style("fill", "url(#iconPattern)")
;


d3.select("svg defs").append("pattern")
    .attr("id", "iconPattern")
    .attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1)
  .style("fill", "#fff")
  .attr("patternContentUnits", "objectBoundingBox")
  .append("text")
  .attr("x", "0.2em")
  .attr("dy", "1em")
  .attr("font-size", 0.8)
  .attr ("font-family", "FontAwesome")
  .text("\uf080")
;

我不会假装它很简单，我不得不使用 objectBoundingBox 并将掩码和图案中的所有内容标准化为 0 到 1 之间，以使它们显示在我找到的示例中的正确位置，并且字体大小是反复试验。但是，是的，这是可行的。

C3 0.7+

哈，事实证明蒙版不起作用只是因为 dom 认为线条的高度为零，即使它是用 10px 粗细绘制的。如果我更改 y2 属性，那么这条线在技术上是一条对角线，那么 space 足以让文本掩码和图案呈现：

对于 .c3-legend-item-tile 是线而不是矩形的 c3 版本

onrendered: function () {
   d3.selectAll(".c3-legend-item-tile").attr("mask", "url(#iconMask)")
      .each (function (d,i) {
            var d3this = d3.select(this);
          d3this.attr("y2", +d3this.attr("y1") + 10);
      })
   ;
}

https://jsfiddle.net/u7coz2p5/3/

有没有办法将 C3 图例项目图块更改为图标？

Is there a way to change C3 legend item tiles to be icons?

javascript

d3.js

bar-chart

font-awesome

c3.js