Fix data label

htdocs/samples/data_label.html

@@ -15,7 +15,7 @@
     <div id="chart10"></div>
     <div id="chart11"></div>
 
-    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
 

src/text.js

@@ -8,35 +8,36 @@ c3_chart_internal_fn.initText = function () {
     $$.mainText = $$.d3.selectAll([]);
 };
 c3_chart_internal_fn.updateTargetsForText = function (targets) {
-    var $$ = this, mainTextUpdate, mainTextEnter,
+    var $$ = this,
         classChartText = $$.classChartText.bind($$),
         classTexts = $$.classTexts.bind($$),
         classFocus = $$.classFocus.bind($$);
-    mainTextUpdate = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText)
+    var mainText = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText)
-        .data(targets)
+        .data(targets);
-        .attr('class', function (d) { return classChartText(d) + classFocus(d); });
+    var mainTextEnter = mainText.enter().append('g')
-    mainTextEnter = mainTextUpdate.enter().append('g')
         .attr('class', classChartText)
         .style('opacity', 0)
         .style("pointer-events", "none");
     mainTextEnter.append('g')
         .attr('class', classTexts);
+    var mainTextUpdate = mainTextEnter.merge(mainText)
+        .attr('class', function (d) { return classChartText(d) + classFocus(d); });
 };
 c3_chart_internal_fn.updateText = function (durationForExit) {
     var $$ = this, config = $$.config,
         barOrLineData = $$.barOrLineData.bind($$),
         classText = $$.classText.bind($$);
-    $$.mainText = $$.main.selectAll('.' + CLASS.texts).selectAll('.' + CLASS.text)
+    var mainText = $$.main.selectAll('.' + CLASS.texts).selectAll('.' + CLASS.text)
         .data(barOrLineData);
-    $$.mainText.enter().append('text')
+    var mainTextEnter = mainText.enter().append('text')
         .attr("class", classText)
         .attr('text-anchor', function (d) { return config.axis_rotated ? (d.value < 0 ? 'end' : 'start') : 'middle'; })
         .style("stroke", 'none')
         .style("fill", function (d) { return $$.color(d); })
         .style("fill-opacity", 0);
-    $$.mainText
+    $$.mainText = mainTextEnter.merge(mainText)
         .text(function (d, i, j) { return $$.dataLabelFormat(d.id)(d.value, d.id, i, j); });
-    $$.mainText.exit()
+    mainText.exit()
         .transition().duration(durationForExit)
         .style('fill-opacity', 0)
         .remove();