add background for every single arc

src/arc.js

@@ -397,12 +397,16 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
         .style("opacity", $$.hasType('donut') || $$.hasType('gauge') ? 1 : 0);
 
     if ($$.hasType('gauge')) {
-        $$.arcs.select('.' + CLASS.chartArcsBackground)
+        var index = 0;
-            .attr("d", function () {
+        $$.arcs.selectAll('.' + CLASS.chartArcsBackground)
+            .attr("d", function (d1) {
+                if ($$.hiddenTargetIds.indexOf(d1.id) >= 0) { return "M 0 0"; }
+
                 var d = {
                     data: [{value: config.gauge_max}],
                     startAngle: -1 * (Math.PI / 2),
-                    endAngle: Math.PI / 2
+                    endAngle: Math.PI / 2,
+                    index: index++
                 };
                 return $$.getArc(d, true, true);
             });
@@ -420,10 +424,13 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
     }
 };
 c3_chart_internal_fn.initGauge = function () {
-    var arcs = this.arcs;
+    var $$ = this, arcs = $$.arcs;
     if (this.hasType('gauge')) {
-        arcs.append('path')
+        arcs.selectAll().data($$.data.targets).enter()
-            .attr("class", CLASS.chartArcsBackground);
+            .append('path')
+            .attr("class", function(d) {
+                return CLASS.chartArcsBackground + ' ' + CLASS.target +'-'+ d.id;
+            });
         arcs.append("text")
             .attr("class", CLASS.chartArcsGaugeUnit)
             .style("text-anchor", "middle")

src/scss/arc.scss

@@ -5,7 +5,7 @@
 
 .c3-chart-arcs .c3-chart-arcs-background {
   fill: #e0e0e0;
-  stroke: none;
+  stroke: #FFF;
 }
 .c3-chart-arcs .c3-chart-arcs-gauge-unit {
   fill: #000;