更改散点图中c3.js的气泡大小

Question

我有一个散点图充电,我想改变点的大小,使它们看起来像气泡.有人能告诉我如何改变泡泡的大小吗？

这是我的代码:

var chart = c3.generate({
    data: {
        xs: {
            IBM: 'ibm_x',
            Microsoft: 'microsoft_x',
        },

        columns: [
            ["ibm_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
            ["microsoft_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
            ["IBM", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["Microsoft", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
        ],
        type: 'scatter'
    },
             color: {
        pattern: ['#4C7A9F', '#E25459']
    },

});

setTimeout(function () {
    chart.load({
        columns: [
            ["IBM", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
        ]
    });
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [
            ["IBM", 10.2, 10.2, 10.2, 10.2, 10.2, 11.4, 10.3, 10.2, 10.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
        ]
    });
}, 2000);

            setTimeout(function () {
    chart.load({
        columns: [
            ["Microsoft", 10.2, 10.2, 10.2, 10.2, 10.2, 11.4, 10.3, 10.2, 10.2, 10.1, 10.2, 10.2, 10.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
        ]
    });
}, 3000);

这是我的FIDDLE.我基本上试图让我的图表看起来像这样

Answer 1

使用c3,如果您只想统一增加点大小,只需为点添加属性并指定半径即可

point: {
    r: 15
},

小提琴 - http://jsfiddle.net/3jfe75r8/

如果要使点大小取决于其中一个维度,可以用函数替换硬编码的15.例如

point: {
    r: function(d) { 
       return d.value * 5;
    }
},

请注意,我乘以比例因子5,这样点就足够大了.如果您的数据值足够大,则实际上您不需要此缩放因子.

如果要使点大小取决于尺寸,则可以执行此操作

point: {
    r: function(d) { 
       return (d.x + d.value) * 5;
    }
},

或者无论你喜欢哪种表情.

如果要按尺寸之一缩放尺寸,可以定义自己的缩放功能并使用它.例如

var rs = d3.scale.linear()
          .domain([0.01, 5])
          .range([5, 50]);

然后

point: {
    r: function(d) {
        return rs(d.value)
    }
},

对于从0.01到5的值,将半径从5线性地缩放到50.

您还可以使用数据集中的实际最小值和最大值替换0.01和5 (使用d3.min(<<数组>>)和d3.max(<<数组>>)).如果数据是多维的,则必须将其展平为数组.

如果您的数据动态更改,请重新定义缩放功能或使其依赖于数据(与从数据计算的值相比)