javascript - 更改 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 .我基本上是想让我的图表看起来像 this

Answer 1

对于c3，如果你只想均匀地增加点的大小，只需为点添加一个属性并指定半径

point: {
    r: 15
},

fiddle - 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(<< array >>) 和 d3.max(<< array >>) ).如果您的数据是多维的，则必须将其展平为一个数组。

如果您的数据动态变化，要么重新定义您的缩放函数，要么让它依赖于数据(相对于从数据计算的值)