Bar-chart's columns are overlapping on sparse data

JSFeedle: https://jsfiddle.net/tymufe5x/

``` js
var chart = c3.generate({
data: {
columns: [
// light sparse is ok:
// ['value', 1, 2, 4],
// ['percent', 10, 20, 30]

// no sparse is ok too
// ['value', 1, 2, 3, 4, 5],
// ['percent', 10, 20, 30, 40, 50]

// but this way columns 1 and 2 are overlapping
['value', 1, 2, 5],
['percent', 10, 20, 30]
],
x: 'value',
type: 'bar'
},
});
```

Versions:

- c3: 0.7.20 + d3: 4.13.0
- c3: 0.7.20 + d3: 5.9.2
- I checked old versions too: c3 0.4.11-rc4 + d3 3.x.
- OS: MacOS 10.14.2
- Browsers: Safari 12.0.2 and Firefox 79
- Problem also reproduced in Firefox 79 on Ubuntu Linux 18.04