Fix z-index for bars and lines

c3.js

@@ -933,6 +933,14 @@
                     })
                 )
 
+            // Define g for bar chart area
+            main.select(".chart").append("g")
+                .attr("class", "chart-bars")
+
+            // Define g for line chart area
+            main.select(".chart").append("g")
+                .attr("class", "chart-lines")
+
             // ATTENTION: This must be called AFTER chart added
             // Add Axis
             main.append("g")
@@ -958,6 +966,14 @@
                     .attr("clip-path", clipPath)
                     .attr('class', 'chart')
 
+                // Define g for bar chart area
+                context.select(".chart").append("g")
+                    .attr("class", "chart-bars")
+
+                // Define g for line chart area
+                context.select(".chart").append("g")
+                    .attr("class", "chart-lines")
+
                 // ATTENTION: This must be called AFTER chart rendered and BEFORE brush called.
                 // Update extetn for Brush
                 if (__subchart_default !== null) {
@@ -1063,22 +1079,6 @@
                     .attr("y2", function(d){ return y(d.value) })
             }
 
-            // lines and cricles
-            main.selectAll('.__line')
-              .transition().duration(withTransition ? 250 : 0)
-                .attr("d", lineOnMain)
-            mainCircle = main.selectAll('.__circles').selectAll('.__circle')
-                .data(lineData)
-            mainCircle.transition().duration(withTransition ? 250 : 0)
-                .attr("cx", function(d){ return x(d.x) })
-                .attr("cy", function(d){ return y(d.value) })
-            mainCircle.enter().append("circle")
-                .attr("class", classCircle)
-                .attr("cx", function(d){ return x(d.x) })
-                .attr("cy", function(d){ return y(d.value) })
-                .attr("r", __point_r)
-            mainCircle.exit().remove()
-
             // bars
             barW = getBarW(xAxis, barTargetsNum)
             barH = getBarH(y, height)
@@ -1098,12 +1098,24 @@
                 .style('opacity', 0)
                 .remove()
 
-            // subchart
+            // lines and cricles
-            if (withSubchart && __subchart_show) {
+            main.selectAll('.__line')
-                context.selectAll('.__line')
               .transition().duration(withTransition ? 250 : 0)
-                    .attr("d", lineOnSub)
+                .attr("d", lineOnMain)
+            mainCircle = main.selectAll('.__circles').selectAll('.__circle')
+                .data(lineData)
+            mainCircle.transition().duration(withTransition ? 250 : 0)
+                .attr("cx", function(d){ return x(d.x) })
+                .attr("cy", function(d){ return y(d.value) })
+            mainCircle.enter().append("circle")
+                .attr("class", classCircle)
+                .attr("cx", function(d){ return x(d.x) })
+                .attr("cy", function(d){ return y(d.value) })
+                .attr("r", __point_r)
+            mainCircle.exit().remove()
 
+            // subchart
+            if (withSubchart && __subchart_show) {
                 // bars
                 barW = getBarW(xAxis2, barTargetsNum)
                 barH = getBarH(y2, height2)
@@ -1122,6 +1134,11 @@
                 contextBar.exit().transition()
                     .style('opacity', 0)
                     .remove()
+
+                // lines
+                context.selectAll('.__line')
+                  .transition().duration(withTransition ? 250 : 0)
+                    .attr("d", lineOnSub)
             }
 
             // circles for select
@@ -1145,55 +1162,73 @@
         }
 
         function updateTargets (targets) {
-            var f, c
+            var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate
+            var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate
 
             /*-- Main --*/
 
-            f = main.select('.chart')
+            //-- Bar --//
-              .selectAll('.target')
+            mainBarUpdate = main.select('.chart-bars')
+              .selectAll('.chart-bar')
                 .data(targets)
-              .enter().append('g')
+            mainBarEnter = mainBarUpdate.enter().append('g')
-                .attr('class', function(d){ return 'target target-' + d.id })
+                .attr('class', function(d){ return 'chart-bar target target-' + d.id })
                 .style("pointer-events", "none")
                 .style('opacity', 0)
+            // Bars for each data
+            mainBarEnter.append('g')
+                .attr("class", classBars)
+                .style("fill", function(d){ return color(d.id) })
+                .style("stroke", function(d){ return color(d.id) })
+                .style("stroke-width", 0)
+                .style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null })
 
+            //-- Line --//
+            mainLineUpdate = main.select('.chart-lines')
+              .selectAll('.chart-line')
+                .data(targets)
+            mainLineEnter = mainLineUpdate.enter().append('g')
+                .attr('class', function(d){ return 'chart-line target target-' + d.id })
+                .style("pointer-events", "none")
+                .style('opacity', 0)
             // Lines for each data
-            f.append("path")
+            mainLineEnter.append("path")
                 .attr("class", classLine)
-                .style("stroke", function(d) { return color(d.id) })
+                .style("stroke", function(d){ return color(d.id) })
             // Circles for each data point on lines
-            f.append('g')
+            mainLineEnter.append('g')
                 .attr("class", function(d){ return "selected-circles selected-circles-" + d.id })
-            f.append('g')
+            mainLineEnter.append('g')
                 .attr("class", classCircles)
                 .style("fill", function(d){ return color(d.id) })
                 .style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null })
-            // Bars for each data
-            f.append('g')
-                .attr("class", classBars)
-                .style("fill", function(d){ return color(d.id) })
-                .style("stroke", function(d){ return color(d.id) })
-                .style("stroke-width", 0)
-                .style("cursor", function(d){ return __data_selection_isselectable(d) ? "pointer" : null })
 
             /*-- Context --*/
 
             if (__subchart_show) {
-                c = context.select('.chart')
+
-                  .selectAll('.target')
+                contextBarUpdate = context.select('.chart-bars')
+                  .selectAll('.chart-bar')
                     .data(targets)
-                  .enter().append('g')
+                contextBarEnter = contextBarUpdate.enter().append('g')
-                    .attr('class', function(d){ return 'target target-' + d.id })
+                    .attr('class', function(d){ return 'chart-bar target target-' + d.id })
                     .style('opacity', 0)
+                // Bars for each data
+                contextBarEnter.append('g')
+                    .attr("class", classBars)
+                    .style("fill", function(d){ return color(d.id) })
 
+                //-- Line --//
+                contextLineUpdate = context.select('.chart-lines')
+                  .selectAll('.chart-line')
+                    .data(targets)
+                contextLineEnter = contextLineUpdate.enter().append('g')
+                    .attr('class', function(d){ return 'chart-line target target-' + d.id })
+                    .style('opacity', 0)
                 // Lines for each data
-                c.append("path")
+                contextLineEnter.append("path")
                     .attr("class", classLine)
                     .style("stroke", function(d) { return color(d.id) })
-                // Bars for each data
-                c.append('g')
-                    .attr("class", classBars)
-                    .style("fill", function(d){ return color(d.id) })
             }
 
             /*-- Legend --*/