c3绘制散点图中的动态气泡大小，错误索引

Question

我正在尝试使用c3.js创建类似的图表。

对于气泡大小，我为每个“大陆”创建一个数组，将人口作为增加气泡大小的因素。国名也以相同的方式存储。

将数据点添加到图表以及将气泡大小/国家/地区名称添加到数组时，索引是相同的。例如。 bubbleInfo数组中的col_2 [0]是“中国”。同样在数据列中，col_2 [0]和col_2_x [0]是76和12000，它们是中国的值。

但是，在我动态获取气泡半径/国家/地区名称的部分中，我从函数参数获取的索引不是col_2数组之一。相反，我按照x轴沿点的顺序得到索引。

E.g。我按此顺序添加x-Axis China（12000），India（5800），Indonesia（9000）。 我希望得到印度的索引1，但我得到索引0，因为5800是x值中最低的。 因此我无法在气泡大小/国家/地区名称上正确映射索引，因为索引是错误的。

这是一个错误，如果是这样，我怎样才能正确映射气泡尺寸/国家名称？

这是JSFiddle：

var chart_3_bubbleSize = {
    "col_2": [10.0, 9.0, 3.9, 2.5, ],
    "col_1": [3.0, 2.5, ],
    "col_3": [2.5, 5.5, ],
};
...
var chart_3_bubbleInfo = {
    "col_2": ["China", "India", "Indonesia", "Japan", ],
    "col_1": ["Russia", "Germany", ],
    "col_3": ["Mexico", "USA", ],
};
...
columns: [
            ['col_2', 76, 66, 71, 86],
            ['col_2_x', 12000, 5800, 9000, 36000],
            ['col_1', 72, 80.4],
            ['col_1_x', 25000, 40000],
            ['col_3', 76, 78],
            ['col_3_x', 16000, 50000],
        ],
...
 point:
    {
        r: function(d)
        {
/*d.index gives the index according to the order along the x-axis, which leads to wrong result, when trying to map to country names/bubble sizes*/
            return 2 * chart_3_bubbleSize[d.id][d.index];

        }
    },

https://jsfiddle.net/51oLxqyt/1/

左下角的第一个绿色泡沫应该是印度，但它的标签是“中国”和中国的泡沫大小，因为中国在bubbleInfo和bubbleSize数组中的指数为0。

Answer 1

没有记录属性data.xSort = false，它保留了原始索引，这使得映射更多维度成为可能，例如对于散点图。 更多信息：https://github.com/c3js/c3/issues/547#issuecomment-56292971