c3js散点图中每个气泡内的文本

Question

我正在使用 c3 生成散点图 js.I 想在 bubble.Text 中显示一些文本可以是它的值（y 轴）或 x 轴 value.The 属性（标签：true）适用于条形图，但在 scatter.Please help

的情况下不起作用

谢谢

Answer 1

向 c3 散点图添加标签

您可以 select 使用 d3 的点并使用点坐标添加您想要的任何文本。例如，这是添加 serei-index.point-index

的方法

function drawLabels(chartInternal) {
    var textLayers = chartInternal.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts);
    for (var i = 0; i < textLayers[0].length; i++) {
        // select each of the scatter points
        chartInternal.mainCircle[i].forEach(function (point, index) {
            var d3point = d3.select(point)
            d3.select(textLayers[0][i])
                .append('text')
                // center horizontally and vertically
                .style('text-anchor', 'middle').attr('dy', '.3em')
                .text(i + '.' + index)
                // same as at the point
                .attr('x', d3point.attr('cx')).attr('y', d3point.attr('cy'))
        })
    }
}

然后这样称呼它

drawLabels(chart.internal);

您可以轻松地使用索引从数组中挑选标签。

响应图例点击

要在显示/隐藏每个系列时更新标签位置，方法是单击挂接到图例上的图例，请单击处理程序删除现有标签，并在散点位于最终位置后在新位置再次绘制它们.您使用超时来确保在动画完成后触发标签绘制

这是您的图例选项

legend: {
    item: {
        onclick: function (id) {
            var $$ = this;
            // remove existing labels
            this.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts).selectAll('*').remove();

            // this block is a copy paste from c3 code                  
            if (this.d3.event.altKey) {
                this.api.hide();
                this.api.show(id);
            } else {
                this.api.toggle(id);
                this.isTargetToShow(id) ? this.api.focus(id) : this.api.revert();
            }

            setTimeout(function () {
                drawLabels($$)
            // add a small duration to make sure the points are in place
            }, this.config.transition_duration + 100)
        }
    }
},

Fiddle - http://jsfiddle.net/mn6qn09d/

c3js散点图中每个气泡内的文本

Text inside each bubble in c3js Scatter plot

c3