C3 Area chart is not displayed if element is created programatically

Reproducible with latest C3 version.

If I use `createElement` to create a C3 chart parent DIV, generate a area chart and then append the div to the document, then the area won't be displayed.

This happens probably because the area opacity is selected from the path element and since it is not attached to the document it will return 0, see `updateArea`:

~~~
ChartInternal.prototype.updateArea = function (durationForExit) {
var $$ = this,
d3 = $$.d3;
var mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area).data($$.lineData.bind($$));
var mainAreaEnter = mainArea.enter().append('path').attr("class", $$.classArea.bind($$)).style("fill", $$.color).style("opacity", function () {
$$.orgAreaOpacity = +d3.select(this).style('opacity');return 0;
});
$$.mainArea = mainAreaEnter.merge(mainArea).style("opacity", $$.orgAreaOpacity);
mainArea.exit().transition().duration(durationForExit).style('opacity', 0);
};
~~~
It is simple to reproduce the issue. Consider this HTML:

~~~

~~~

Use this in app.js:

~~~
var chartDiv = document.createElement('div');
var chart = c3.generate({
bindto: chartDiv,
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area'
}
});
document.getElementById('charttest').appendChild(chartDiv);
~~~

Run index.html and you will that the chart area is not generated.