更改散点图中c3.js的气泡大小 [英] Change size of bubble in Scatter Plot for c3.js

问题描述

我有一个散点图充电，我想改变点的大小，使它们看起来像气泡。有人可以告诉我如何更改泡泡的大小吗？

I have a scatter plot charge where i want to change the size of the dots to make them look like bubble. Can someone show me how to change size of the bubble?

这是我的代码：

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 。我基本上试图让我的图表看起来像这个

This is my FIDDLE. I am basically trying to get my graph to look like this

推荐答案

使用c3，如果你只是想增加点数统一，只需为点添加属性并指定半径

With c3, if you just want to increase the point size uniformly, just add a property for points and specify the radius

point: {
    r: 15
},

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

如果你想做的话点大小取决于其中一个维，您可以用函数替换硬编码的15。例如

If you want to make the point size dependent on one of the dimensions you can replace the hardcoded 15 by a function. For instance

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

请注意，我乘以比例因子5 ，这样点数就够大了。如果你的数据值足够大，你实际上不需要这个缩放因子。

Notice that I multiplied by a scaling factor of 5, so that the points would be large enough. If your data values are large enough, you actually don't need this scaling factor.

如果你想制作点大小取决于尺寸你会这样做

If you want to make the point size dependent on both the the dimensions you would do this

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

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

Or whatever expression that strikes your fancy.

如果您想按尺寸之一缩放尺寸，您可以定义自己的缩放比例功能和用途。例如

If you want to scale the size by one of the dimension, you can define your own scaling function and use that. For instance

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。

Which would scale the radius linearly from 5 to 50 for values from 0.01 to 5.

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

You could also replace 0.01 and 5 by the actual min and max values from your dataset (use d3.min(< < array > >) and d3.max(< < array > >)). If you data is multidimensional, you'll have to flatten it into an array.

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

If your data changes dynamically either redefine your scaling function or have it depend on the data (vs. values calculated from the data)

这篇关于更改散点图中c3.js的气泡大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！