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

Question

我正在尝试用 c3.js 制作一个类似的图表。

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

将数据点添加到图表时以及将气泡 sizes/country 名称添加到数组时，索引是相同的。例如。 bubbleInfo数组中的col_2[0]为"China"。同样在数据列 col_2[0] 和 col_2_x[0] 中是 76 和 12000，它们是中国的值。

但是，在我动态获取气泡 radius/country 名称的部分中，我从函数参数中获取的索引不是 col_2 数组之一。相反，我按照点沿 x 轴传播的顺序获取索引。

例如我按此顺序添加 x 轴中国 (12000)、印度 (5800)、印度尼西亚 (9000)。我希望获得印度的索引 1，但我得到索引 0，因为 5800 是 x 值中的最低值。因此，我无法正确地将索引映射到气泡 sizes/country 名称上，因为索引是错误的。

这是一个错误吗？如果是，我该如何正确映射气泡 sizes/country 名称？

这是 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/

左下角的第一个绿色气泡应该是印度，但它有标签"China"和中国的气泡大小，因为中国在bubbleInfo和bubbleSize数组中的索引为0。

Answer 1

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

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

c3 charts dynamic bubble size in scatter plot, wrong index

bubble-chart

dynamic

scatter-plot

c3.js