Moves bar and arc opacity styling to CSS; closes #1069. (#2069)

src/arc.js

@@ -191,8 +191,7 @@ c3_chart_internal_fn.unexpandArc = function (targetIds) {
             return $$.expandDuration(d.data.id);
         })
         .attr("d", $$.svgArc);
-    $$.svg.selectAll('.' + CLASS.arc)
+    $$.svg.selectAll('.' + CLASS.arc);
-        .style("opacity", 1);
 };
 
 c3_chart_internal_fn.expandDuration = function (id) {
@@ -297,7 +296,6 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
         .attr("class", $$.classArc.bind($$))
         .style("fill", function (d) { return $$.color(d.data); })
         .style("cursor", function (d) { return config.interaction_enabled && config.data_selection_isselectable(d) ? "pointer" : null; })
-        .style("opacity", 0)
         .each(function (d) {
             if ($$.isGaugeType(d.data)) {
                 d.startAngle = d.endAngle = config.gauge_startingAngle;
@@ -306,7 +304,6 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
         });
     mainArc
         .attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
-        .style("opacity", function (d) { return d === this._current ? 0 : 1; })
         .on('mouseover', config.interaction_enabled ? function (d) {
             var updated, arcData;
             if ($$.transiting) { // skip while transiting
@@ -387,7 +384,6 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
         .style("fill", function (d) {
             return $$.levelColor ? $$.levelColor(d.data.values[0].value) : $$.color(d.data.id);
         }) // Where gauge reading color would receive customization.
-        .style("opacity", 1)
         .call($$.endall, function () {
             $$.transiting = false;
         });

src/scss/arc.scss

@@ -22,3 +22,11 @@
   fill: #000;
 /*  font-size: 28px !important;*/
 }
+
+.c3-chart-arc.c3-target g path {
+  opacity: 1;
+}
+
+.c3-chart-arc.c3-target.c3-focused g path {
+  opacity: 1;
+}

src/scss/bar.scss

@@ -2,5 +2,6 @@
   stroke-width: 0;
 }
 .c3-bar._expanded_ {
+  fill-opacity: 1;
   fill-opacity: 0.75;
 }

src/shape.bar.js

@@ -18,7 +18,6 @@ c3_chart_internal_fn.updateTargetsForBar = function (targets) {
         .attr('class', function (d) { return classChartBar(d) + classFocus(d); });
     mainBarEnter = mainBarUpdate.enter().append('g')
         .attr('class', classChartBar)
-        .style('opacity', 0)
         .style("pointer-events", "none");
     // Bars for each data
     mainBarEnter.append('g')
@@ -41,7 +40,6 @@ c3_chart_internal_fn.updateBar = function (durationForExit) {
     $$.mainBar
         .style("opacity", initialOpacity);
     $$.mainBar.exit().transition().duration(durationForExit)
-        .style('opacity', 0)
         .remove();
 };
 c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {