气泡图 c3js答案

【问题标题】：Bubble chart c3js气泡图 c3js
【发布时间】：2018-02-23 20:02:54
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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 步骤是值得商榷的。如果您不只记得调整域以解决此问题 - 将其更改为 domain([1,1000000])

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

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

【讨论】：