From c92e2cd9522ce8a08fc6b64f2f397fb0e80c7155 Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Thu, 20 Oct 2016 21:16:50 +0200
Subject: [PATCH] Line graph draw segments by depth order (#2200)

---
 lib/graph3d/Graph3d.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index 102312a9..560df040 100644
--- a/lib/graph3d/Graph3d.js
+++ b/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);
+      }
+    }
   }
 };