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
},

小提琴 - 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（＆lt;＆lt; array＆gt;＆gt;）和d3.max（＆lt; ＆lt; array＆gt;＆gt;））。如果您的数据是多维的，那么您必须将其展平为数组。

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

Answer 2

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或访问此Gist。文件index_previous.html是一个类似于您要查找的示例，只需下载示例，数据并删除＆＃34; //＆＃34;从这一行：

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

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

2 个答案: