d3.js - 如何给c3.js散点图添加标签？

Question

是否可以像这个谷歌图表示例一样在 c3.js 中添加标签来散点图点？

<小时/>

https://google-developers.appspot.com/chart/interactive/docs/gallery/bubblechart#javascript

Answer 1

c3 目前不支持此功能 - https://github.com/masayuki0812/c3/issues/481 。但您可以轻松添加功能 - 只需循环图表系列和点并根据需要添加标签即可。

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

<小时/>

fiddle - http://jsfiddle.net/6phuuans/

<小时/>