气泡图 c3js

Question

Following the c3js documentation there is no option for Bubble chart. One workaround for that is to setup scatter plot and specify point radius, but all of the bubbles will be the same height.

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

Adding the value of axis inside the r solve the problem, but now the problem is how to setup very high or very low values ? For eg if there is 1 000 000 value the whole chart will be colored. Is there any simple workarounds for that ?

Answer 1

First of all, set r to return the square root of your chosen variable eg return sqrt(num), that way a circle representing a data point 100 times the size of another has 100, not 10,000, times the area (area=pi r2 and all that)

If the numbers are still too big use a linear scale to restrict them to a usable size:

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

and then return rscale(sqrt(num))

If your problem is to represent large and small values on the same chart so small values don't disappear and large values don't exceed the chart size look at using a d3 log scale:

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

Of course on a log scale the areas aren't linearly proportionate any more so whether the sqrt step is necessary is debatable. If you don't just remember to adjust the domain to account for this - change it to domain([1,1000000])

if you don't know the size of your numbers beforehand it will be worthwhile looping through your dataset to pick out the min and max to plug into the domain value: domain([your_min, your_max]). my examples above all assume a max of one million.

Here's an example I forked on jsfiddle, numbers from a few hundred to over a hundred thousand are displayed using a log scale and all are visible but the differences are still obvious:

http://jsfiddle.net/m9gcno5n/