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

Posted 2023-02-22

【中文标题】更改 c3.js 散点图中气泡的大小

【英文标题】：Change size of bubble in Scatter Plot for c3.js

【发布时间】：2015-08-23 01:53:27

【问题描述】：

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

这是我的代码：

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

【问题讨论】：

气泡图的每个元素需要三个值：x、y 和 value。第三个是用来设置相对大小（半径，面积...）。我在您的数据中没有看到这种类型的结构。

【参考方案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 或访问此Gist。文件 index_previous.html 是一个类似于您正在寻找的示例，只需下载示例、数据并从该行中删除“//”：

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

【讨论】：

我会看看你的链接是否可以编辑我的小提琴并再次向我展示非常感谢您的参考。

【参考方案2】：

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

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

【讨论】：

赞成，这很好，但现在如果我只想让其中一些变大一些变小？您能提出什么替代方案？

你也可以用函数替换 15 - 例如 - r: function(d) return Math.random() * 30; ，会给你不同半径的气泡。顺便说一句，您的数据没有第三维，那么您有什么真正想要这样做的理由？

这是另一个基于数据集修改半径的示例 - github.com/masayuki0812/c3/blob/master/htdocs/samples/…

d.x 是点的 x 值，d.value 是 y 值，d.index 是索引（您可以使用它来引用 z 维度）。例如函数(d) 返回 d.x * d.value * 5; 使半径成为 x 和 y 值的函数。

@user1010101 - 你有 2 个维度。每个数据集将有 2 个最大值 - 每个轴一个。对于逻辑，逻辑将类似于肖恩所说的。干杯！