Question

根据c3js文档，没有气泡图选项。一种解决方法是设置散点图并指定点半径，但所有气泡的高度都相同。

point = {
          r: function(d) {
             var num = d.value;
             return num
          },

在r中添加轴的值可以解决问题，但现在的问题是如何设置非常高或非常低的值？例如，如果有1 000 000个值，则整个图表将被着色。有没有简单的解决方法呢？

Answer 1

首先，设置r以返回所选变量的平方根，例如返回sqrt（num），这样一个圆圈表示一个100倍于另一个的大小的数据点有100倍，而不是10,000倍的面积（area = pi r2和那个）

如果数字仍然太大，请使用线性刻度将其限制为可用大小：

rscale = d3.scale.linear().domain([1,1000]).range([0,10])

然后返回rscale（sqrt（num））

如果您的问题是在同一图表上表示大小值，那么小值不会消失，大值不会超过图表大小，请使用d3对数刻度：

rscale = d3.scale.log().base(10).domain([1,1000]).range([0,10])

当然，在对数标度上，这些区域不再是线性比例，因此sqrt步骤是否必要是值得商榷的。如果您不记得调整域名以解决此问题 - 将其更改为域名（[1,1000000]）

如果您事先不知道数字的大小，那么循环浏览数据集以选择最小值和最大值来插入域值：domain（[your_min，your_max]）是值得的。我上面的例子假设最多只有一百万。

这是我在jsfiddle上分享的一个例子，使用对数刻度显示从几百到十万的数字，所有数字都可见，但差异仍然很明显：