Fix api.grid and update samples to use d3.v4

c3js · Jan 6, 2018 · bd1d321 · bd1d321
1 parent 8b9318f
commit bd1d321
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 11 deletions.
diff --git a/htdocs/samples/api_axis_label.html b/htdocs/samples/api_axis_label.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({

diff --git a/htdocs/samples/api_axis_range.html b/htdocs/samples/api_axis_range.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({

diff --git a/htdocs/samples/api_data_colors.html b/htdocs/samples/api_data_colors.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
 

diff --git a/htdocs/samples/api_legend.html b/htdocs/samples/api_legend.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
 

diff --git a/htdocs/samples/api_transform.html b/htdocs/samples/api_transform.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
 

diff --git a/htdocs/samples/api_xgrid_lines.html b/htdocs/samples/api_xgrid_lines.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
 

diff --git a/htdocs/samples/api_ygrid_lines.html b/htdocs/samples/api_ygrid_lines.html
@@ -5,7 +5,7 @@
   <body>
     <div id="chart"></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>
       var chart = c3.generate({
@@ -20,7 +20,7 @@
         },
         grid: {
           y: {
-//            lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
+            lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
           }
         }
       });

diff --git a/htdocs/samples/element.html b/htdocs/samples/element.html
@@ -7,7 +7,7 @@
     <div id="chart2"></div>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <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>
 

diff --git a/src/grid.js b/src/grid.js
@@ -95,7 +95,9 @@ c3_chart_internal_fn.yGridTextX = function (d) {
 };
 c3_chart_internal_fn.updateGrid = function (duration) {
     var $$ = this, main = $$.main, config = $$.config,
-        xgridLine, xgridLineEnter, ygridLine, ygridLineEnter, yv;
+        xgridLine, xgridLineEnter, ygridLine, ygridLineEnter,
+        xv = $$.xv.bind($$), yv = $$.yv.bind($$),
+        xGridTextX = $$.xGridTextX.bind($$), yGridTextX = $$.yGridTextX.bind($$);
 
     // hide if arc type
     $$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible');
@@ -110,10 +112,16 @@ c3_chart_internal_fn.updateGrid = function (duration) {
     xgridLineEnter = xgridLine.enter().append('g')
         .attr("class", function (d) { return CLASS.xgridLine + (d['class'] ? ' ' + d['class'] : ''); });
     xgridLineEnter.append('line')
+        .attr("x1", config.axis_rotated ? 0 : xv)
+        .attr("x2", config.axis_rotated ? $$.width : xv)
+        .attr("y1", config.axis_rotated ? xv : 0)
+        .attr("y2", config.axis_rotated ? xv : $$.height)
         .style("opacity", 0);
     xgridLineEnter.append('text')
         .attr("text-anchor", $$.gridTextAnchor)
         .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
+        .attr("x", config.axis_rotated ? yGridTextX : xGridTextX)
+        .attr("y", xv)
         .attr('dx', $$.gridTextDx)
         .attr('dy', -5)
         .style("opacity", 0);
@@ -135,16 +143,21 @@ c3_chart_internal_fn.updateGrid = function (duration) {
     ygridLineEnter = ygridLine.enter().append('g')
         .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
     ygridLineEnter.append('line')
+        .attr("x1", config.axis_rotated ? yv : 0)
+        .attr("x2", config.axis_rotated ? yv : $$.width)
+        .attr("y1", config.axis_rotated ? 0 : yv)
+        .attr("y2", config.axis_rotated ? $$.height : yv)
         .style("opacity", 0);
     ygridLineEnter.append('text')
         .attr("text-anchor", $$.gridTextAnchor)
         .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
+        .attr("x", config.axis_rotated ? xGridTextX : yGridTextX)
+        .attr("y", yv)
         .attr('dx', $$.gridTextDx)
         .attr('dy', -5)
         .style("opacity", 0);
     // update
     $$.ygridLines = ygridLineEnter.merge(ygridLine);
-    yv = $$.yv.bind($$);
     $$.ygridLines.select('line')
       .transition().duration(duration)
         .attr("x1", config.axis_rotated ? yv : 0)