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

Question

是否可以像 google 图表示例中那样在 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/

Answer 2

目前C3.js不向我们提供向散点图添加标签的选项。但是可以使用下面的方法来添加响应式数据标签：

渲染图表后（在图表的 "onrendered" 属性中），识别数据点（标签）并使用从相关圆圈中选取的 x 和 y 坐标添加标签，作为兄弟标签。

代码片段：

onrendered: function(){
  // get the parent of the the <circles> to add <text as siblings>
  var g = d3.selectAll('.c3-circles');
  //Get all circle tags
  var circles = d3.selectAll('circle')[0];
  //go to each circle and add a text label for it
  for(var i = 0; i < circles.length; i++){
    //fetch x-coordinate
    var x = $(circles[i])[0].cx;
    //fetch y-coordinate
    var y = $(circles[i])[0].cy;

    //create and append the text tag
    g.append('text')
      .attr('y', y.baseVal.value - 15)  // (-15) places the tag above the circle, adjust it according to your need
      .attr('x', x.baseVal.value)
      .attr('text-anchor', 'middle')
      .attr('class', 'c3-text c3-text-'+i)
      .text(data[i].<data point key>) // the text that needs to be added can be hard coded or fetched for the original data.
      //Since I am using a JSON to plot the data, I am referencing it and using the key of the value to be shown.

  }

}

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

代码片段：

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

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

How to add labels to c3.js scatter plot graph?

d3.js

scatter-plot

c3.js

c3