D3.js 如何向c3.js散点图添加标签？

在c3.js中是否可以像google charts示例中那样向散点图点添加标签

---

---

c3目前不支持此功能-。但是你可以很容易地添加功能——只需在图表系列和点之间循环，并根据需要添加标签

var labels = [
    ['AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG', 'HH'],
    ['ZA', 'ZB', 'ZC', 'ZD', 'ZE', 'ZF', 'ZG', 'ZH']
];
// series
var series = chart.internal.main
                .selectAll('.' + c3.chart.internal.fn.CLASS.circles)[0];
// text layers
var texts = chart.internal.main
                .selectAll('.' + c3.chart.internal.fn.CLASS.chartTexts)
                .selectAll('.' + c3.chart.internal.fn.CLASS.chartText)[0]
series.forEach(function (series, i) {
    var points = d3.select(series).selectAll('.' + c3.chart.internal.fn.CLASS.circle)[0]
    points.forEach(function (point, j) {
        d3.select(texts[i])
            .append('text')
            .attr('text-anchor', 'middle')
            .attr('dy', '0.3em')
            .attr('x', d3.select(point).attr('cx'))
            .attr('y', d3.select(point).attr('cy'))
            .text(labels[i][j])
    })
});

---

小提琴-

---

---

目前C3.js没有为我们提供向散点图添加标签的选项。但以下方法可用于添加响应数据标签：

渲染图表后（在图表的“onrendered”属性中），标识数据点（标记），并添加标记，其中x和y坐标是从相关圆中拾取的，作为标记的同级

代码段：

onrendered:function（）{
//获取要添加的对象的父对象
变量g=d3.selectAll（'.c3圆圈'）；
//获取所有圆标记
var circles=d3。选择all（'circle'）[0]；
//转到每个圆并为其添加文本标签
对于（变量i=0；i

这将添加标签，但在调整大小时，将打印多个数据标签。要处理这个问题，在调整图表大小时，我们必须删除以前的数据标签（在图表的“onresize”属性中）

代码段：

---

谢谢，这太好了。有没有一种方法可以使这项工作在一个响应性的布局中？因此，当图表宽度改变时，标签与散点保持一致？开始使用该方法，但随后意识到“点”循环正在检索按x值排序的圆（我猜c3在内部保持圆的方式），因此标签数组必须按x值排序。有没有办法让我的标签数组与数据的顺序相同？（在所示示例中，蓝色FF圆圈是数据数组中的第一个圆圈，因此我希望该圆圈获得标签AA）

 onresize: function () {
              $('.c3-shapes.c3-circles text').remove();
           }