Line graph draw segments by depth order (#2200)

lib/graph3d/Graph3d.js

@@ -1006,6 +1006,13 @@ Graph3d.prototype._getDataPoints = function (data) {
       obj.trans = undefined;
       obj.screen = undefined;
 
+      if (this.style === Graph3d.STYLE.LINE) {
+        if (i > 0) {
+          // Add next point for line drawing
+          dataPoints[i - 1].pointNext = obj;
+        }
+      }
+
       dataPoints.push(obj);
     }
   }
@@ -2105,7 +2112,7 @@ Graph3d.prototype._redrawDataLine = function() {
   if (this.dataPoints === undefined || this.dataPoints.length <= 0)
     return;  // TODO: throw exception?
 
-  this._calcTranslations(this.dataPoints, false);
+  this._calcTranslations(this.dataPoints);
 
   // start the line
   if (this.dataPoints.length > 0) {
@@ -2115,17 +2122,14 @@ Graph3d.prototype._redrawDataLine = function() {
     ctx.lineJoin = 'round';
     ctx.lineCap = 'round';
     ctx.strokeStyle = this.dataColor.stroke;
-    ctx.beginPath();
-    ctx.moveTo(point.screen.x, point.screen.y);
 
-    // draw the datapoints as colored circles
-    for (i = 1; i < this.dataPoints.length; i++) {
+    for (i = 0; i < this.dataPoints.length; i++) {
       point = this.dataPoints[i];
-      ctx.lineTo(point.screen.x, point.screen.y);
-    }
 
-    // finish the line
-    ctx.stroke();
+      if (point.pointNext !== undefined) {
+        this._line(ctx, point.screen, point.pointNext.screen);
+      }
+    }
   }
 };