c3.js的柱状图堆叠以及tooltip自定义问题

Question

两组数据，sumData和subData，通过groups将其堆叠在一起，原始的效果是：
一条记录上，sumData为10，subData为5，但是柱状图的总高度是15，而需求是想要总高度是10，换而言之，就是如图所示：

因此我的问题在于如何在label里或者tooltip里对data1的value修改时获取到对应index的data2的value进行进一步的操作。
问题如代码中label和tooltip的注释

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100, 100, 100, 100, 100, 100],
            ['data2', 200, 200, 200, 200, 200, 200],
        ],
        groups: [
            ['data1', 'data2']
        ],
        type: 'bar',
        labels: {
            // format: function (v, id, i, j) { return "Default Format"; },
            format: {
                data2: function (value, id, index, j) { 
                    return value+3; //想知道在这里如何获取data2对应的value以此进行下一步的操作
                },
            }
        }
    },
    tooltip:{
        format: {
            title: function (d) { return 'Data ' + d; },
            value: function (value, ratio, id) {
                var format = id === 'data1' ? d3.format(',') : d3.format('$');
                return format(value);
            }//这里是根据数组id来将其展示格式做了设置，如何对数据进行获取和操作呢？
           // value: d3.format(',') // apply this format to both y and y2
        }
    }
});

Answer 1

首先得自我检讨，看文档不仔细，下附解决方案：
lables有一个配置项如下

data: {
  labels: {
    format: function (v, id, i, j) { ... }
    // it's possible to set for each data
    //可以对所有数据进行筛选操作，v是一个集合，可以通过index来选择data1或data2，console.log一下就能看出来了
  }
}

然后说说tooltip
同样也是有一个配置项，如下所示

tooltip: {
  contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
    return ... // formatted html as you want最后返回一个自定义好的html片段即可
  }
}

这里就可以自定义tooltip的样式及数据格式，形参d为数据集合，console.log一下就明白怎么做了