Question

我使用c3 js生成散点图。我想在bubble.Text中显示一些文本。它可以是其值（y轴）或x轴值。用于条形图的属性（标签：true）确实分散时不起作用。请帮忙

由于

Answer 1

将标签添加到c3散点图

您可以使用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)
        }
    }
},

小提琴 - http://jsfiddle.net/mn6qn09d/

c3js Scatter图中每个气泡内的文字

1 个答案: