更改散点图中气泡的大小 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. I am basically trying to get my graph to look like this

Answer 1

d3 尺寸适合您。例如：

var circle = svg.selectAll("circle")
    .data([32, 57, 293], String);

circle.enter().append("svg:circle")
    .attr("cy", 90)
    .attr("cx", String)
    .attr("r", Math.sqrt);

这也是一个很好的参考：Link or visit this Gist。文件 index_previous.html 是一个类似于您要查找的示例，只需下载示例、数据并从此行中删除“//”：

//bubbles.addMeasureAxis("z", "Delay_per_Flight (minutes)");

Answer 2

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

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

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

Change size of bubble in Scatter Plot for c3.js

javascript

d3.js

c3.js