气泡图c3js

Question

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

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

在r中添加axis的值解决了问题，但现在的问题是如何设置非常高或非常低的值？例如，如果有 1 000 000 个值，整个图表将被着色。有什么简单的解决方法吗？

Answer 1

首先，将 r 设置为 return 所选变量的平方根，例如return sqrt(num)，这样一个代表数据点的 100 倍的圆是面积的 100 倍，而不是 10,000 倍（area=pi r2 等等）

如果数字仍然太大，请使用线性刻度将它们限制在可用大小内：

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

然后 return rscale(sqrt(num))

如果您的问题是在同一张图表上表示大值和小值，这样小值就不会消失，大值也不会超过图表大小，请考虑使用 d3 对数刻度：

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

当然，在对数尺度上，面积不再成线性比例，因此是否需要 sqrt 步骤值得商榷。如果您不只是记得调整域来解决这个问题 - 将其更改为 domain([1,1000000])

如果您事先不知道数字的大小，则值得循环遍历数据集以选择最小值和最大值以插入域值：domain([your_min, your_max]).我上面的例子都假设最多一百万。

这是我在jsfiddle上fork的一个例子，从几百到十万以上的数字都是用对数刻度显示的，都是可见的，但区别还是很明显的：

Bubble chart c3js