feat(style): allow z-independent values for "regular" graphs (#100)

* Allow z-independent values for "regular" graphs This allows setting values independent of the z coordinate (but falls back to the old behaviour of using `z` if not specified) for the following plots: - bar - dot - dot-line - grid - surface * Update documentation * Remove _checkValueField method colValue is always defined now, so no need for special treatment. * Add an example * Add missing example links
visjs · Mar 2, 2020 · fbb2587 · fbb2587
1 parent 0e77a16
commit fbb2587
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 60 deletions.
diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html
@@ -231,7 +231,10 @@ <h3>Definition</h3>
       <td>The data value, required for graph styles <code>dot-color</code> and
         <code>dot-size</code>.  If an object is supplied, this allows styling on
         a per-point basis.  The object should be in the form of
-        <code>{ "fill":"red", "stroke":"#999" }</code>.
+        <code>{ "fill":"red", "stroke":"#999" }</code>. For graph styles
+        <code>bar</code>, <code>dot</code>, <code>dot-line</code>,
+        <code>grid</code>, and <code>surface</code> this column can be used to
+        specify data values, but no per-point styling is supported yet.
       </td>
     </tr>
     <tr>

diff --git a/examples/graph3d/17_surface_value.html b/examples/graph3d/17_surface_value.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D | Surface value</title>
+
+  <style>
+    body {font: 10pt arial;}
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis-graph3d.min.js"></script>
+
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // Create and populate a data table.
+      data = new vis.DataSet();
+      // create some nice looking data with sin/cos
+      var counter = 0;
+      var steps = 50;  // number of datapoints will be steps*steps
+      var axisMax = 314;
+      var axisStep = axisMax / steps;
+      for (var x = 0; x < axisMax; x+=axisStep) {
+        for (var y = 0; y < axisMax; y+=axisStep) {
+          var height = Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
+          var value = Math.sin(x/20) * Math.cos(y/20);
+          data.add({id:counter++,x:x,y:y,z:height,style:value});
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5
+      };
+
+      // Instantiate our graph object.
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+
+</head>
+
+<body onload="drawVisualization();">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>
diff --git a/examples/graph3d/index.html b/examples/graph3d/index.html
@@ -11,7 +11,7 @@
 	<div class="contentWrapper">
 		<div id="contentContainer">
 				<h1>Grpah3D Examples</h1>
-				
+
 				<a class="btn btn-primary" href="../../docs/" role="button">View docs »</a><br>
 				<a class='exampleLink' href="playground/index.html">interactive playground »</a><br>
 
@@ -29,6 +29,11 @@ <h3>Basic usage</h3>
 					<li><a class='exampleLink' href="10_styling.html">styling</a></li>
 					<li><a class='exampleLink' href="11_tooltips.html">tooltips</a></li>
 					<li><a class='exampleLink' href="12_custom_labels.html">custom_labels</a></li>
+					<li><a class='exampleLink' href="13_disable_zoom.html">disable zoom</a></li>
+					<li><a class='exampleLink' href="14_zoom_ctrl_scroll.html">zoom ctrl scroll</a></li>
+					<li><a class='exampleLink' href="15_styling_per_point.html">styling per point</a></li>
+					<li><a class='exampleLink' href="16_styling_surface.html">styling surface</a></li>
+					<li><a class='exampleLink' href="17_surface_value.html">surface value</a></li>
 				</ul>
 
 				<h3>Extended examples</h3>
@@ -39,4 +44,4 @@ <h3>Extended examples</h3>
 		</div>
 	</div>
 </body>
-</html>
+</html>
diff --git a/lib/graph3d/DataGroup.js b/lib/graph3d/DataGroup.js
@@ -108,6 +108,10 @@ DataGroup.prototype.initializeData = function(graph3d, rawData, style) {
     this._setRangeDefaults(valueRange, graph3d.defaultValueMin, graph3d.defaultValueMax);
     this.valueRange = valueRange;
   }
+  else {
+    this.colValue = 'z';
+    this.valueRange = this.zRange;
+  }
 
   // Initialize data filter if a filter column is provided
   var table = this.getDataTable();
@@ -337,10 +341,7 @@ DataGroup.prototype.getDataPoints = function(data) {
     point.y = data[i][this.colY] || 0;
     point.z = data[i][this.colZ] || 0;
     point.data = data[i];
-
-    if (this.colValue !== undefined) {
-      point.value = data[i][this.colValue] || 0;
-    }
+    point.value = data[i][this.colValue] || 0;
 
     var obj = {};
     obj.point = point;
@@ -445,7 +446,6 @@ DataGroup.prototype._getDataPoints = function (data) {
     dataPoints = this.initDataAsMatrix(data);
   }
   else {  // 'dot', 'dot-line', etc.
-    this._checkValueField(data);
     dataPoints = this.getDataPoints(data);
 
     if (this.style === Settings.STYLE.LINE) {
@@ -462,43 +462,4 @@ DataGroup.prototype._getDataPoints = function (data) {
 };
 
 
-/**
- * Check if the state is consistent for the use of the value field.
- *
- * Throws if a problem is detected.
- *
- * @param {Array.<Object>} data
- * @private
- */
-DataGroup.prototype._checkValueField = function (data) {
-
-  var hasValueField = this.style === Settings.STYLE.BARCOLOR
-                   || this.style === Settings.STYLE.BARSIZE
-                   || this.style === Settings.STYLE.DOTCOLOR
-                   || this.style === Settings.STYLE.DOTSIZE;
-
-  if (!hasValueField) {
-    return;   // No need to check further
-  }
-
-
-  // Following field must be present for the current graph style
-  if (this.colValue === undefined) {
-    throw new Error('Expected data to have '
-      + ' field \'style\' '
-      + ' for graph style \'' + this.style + '\''
-    );
-  }
-
-  // The data must also contain this field.
-  // Note that only first data element is checked.
-  if (data[0][this.colValue] === undefined) {
-    throw new Error('Expected data to have '
-      + ' field \'' + this.colValue + '\' '
-      + ' for graph style \'' + this.style + '\''
-    );
-  }
-};
-
-
 module.exports = DataGroup;
diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
@@ -385,10 +385,7 @@ Graph3d.prototype.getDataPoints = function(data) {
     point.y = data[i][this.colY] || 0;
     point.z = data[i][this.colZ] || 0;
     point.data = data[i];
-
-    if (this.colValue !== undefined) {
-      point.value = data[i][this.colValue] || 0;
-    }
+    point.value = data[i][this.colValue] || 0;
 
     var obj = {};
     obj.point = point;
@@ -459,7 +456,6 @@ Graph3d.prototype._getDataPoints = function (data) {
     }
   }
   else {  // 'dot', 'dot-line', etc.
-    this._checkValueField(data);
     dataPoints = this.getDataPoints(data);
 
     if (this.style === Graph3d.STYLE.LINE) {
@@ -848,6 +844,7 @@ Graph3d.prototype._redrawLegend = function() {
   // Legend is either tracking z values or style values. This flag if false means use z values.
   var isValueLegend = (this.style === Graph3d.STYLE.DOTSIZE
                   || this.style === Graph3d.STYLE.DOTCOLOR
+                  || this.style === Graph3d.STYLE.SURFACE
                   || this.style === Graph3d.STYLE.BARCOLOR);
 
   var height = Math.max(this.frame.clientHeight * 0.25, 100);
@@ -1629,8 +1626,8 @@ Graph3d.prototype._drawCircle = function(ctx, point, color, borderColor, size) {
  * @private
  */
 Graph3d.prototype._getColorsRegular = function(point) {
-  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-  var hue         = (1 - (point.point.z - this.zRange.min) * this.scale.z  / this.verticalRatio) * 240;
+  // calculate Hue from the current value. At vMin the hue is 240, at vMax the hue is 0
+  var hue         = (1 - (point.point.value - this.valueRange.min) * this.scale.value) * 240;
   var color       = this._hsv2rgb(hue, 1, 1);
   var borderColor = this._hsv2rgb(hue, 1, 0.8);
 
@@ -1886,9 +1883,9 @@ Graph3d.prototype._redrawSurfaceGraphPoint = function(ctx, point) {
 
   if (topSideVisible) {
 
-    // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-    var zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
-    var ratio = (1 - (zAvg - this.zRange.min) * this.scale.z  / this.verticalRatio);
+    // calculate Hue from the current value. At vMin the hue is 240, at vMax the hue is 0
+    var vAvg = (point.point.value + right.point.value + top.point.value + cross.point.value) / 4;
+    var ratio = (1 - (vAvg - this.valueRange.min) * this.scale.value);
 
     var colors = this.surfaceColors;
     if (colors && colors.length !== 0) {
@@ -1955,9 +1952,9 @@ Graph3d.prototype._drawGridLine = function(ctx, from, to) {
      return;
   }
 
-  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-  var zAvg = (from.point.z + to.point.z) / 2;
-  var h    = (1 - (zAvg - this.zRange.min) * this.scale.z  / this.verticalRatio) * 240;
+  // calculate Hue from the current value. At vMin the hue is 240, at vMax the hue is 0
+  var vAvg = (from.point.value + to.point.value) / 2;
+  var h    = (1 - (vAvg - this.valueRange.min) * this.scale.value) * 240;
 
   ctx.lineWidth   = this._getStrokeWidth(from) * 2;
   ctx.strokeStyle = this._hsv2rgb(h, 1, 1);