Browse Source

Renamed event `camerapositionchange` to `cameraPositionChange`

css_transitions
jos 10 years ago
parent
commit
f2b1eed9d4
5 changed files with 42 additions and 29 deletions
  1. +12
    -10
      docs/graph3d.html
  2. +2
    -2
      examples/graph3d/example01_basis.html
  3. +5
    -5
      examples/graph3d/example02_camera.html
  4. +3
    -3
      examples/graph3d/example10_styles.html
  5. +20
    -9
      src/graph3d/Graph3d.js

+ 12
- 10
docs/graph3d.html View File

@ -62,7 +62,7 @@
// Called when the Visualization API is loaded. // Called when the Visualization API is loaded.
function drawVisualization() { function drawVisualization() {
// Create and populate a data table. // Create and populate a data table.
var data = [];
var data = new vis.DataSet();
// create some nice looking data with sin/cos // create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314; var axisMax = 314;
@ -70,7 +70,7 @@
for (var x = 0; x < axisMax; x+=axisStep) { for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) { for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x, y); var value = custom(x, y);
data.push({
data.add({
x: x, x: x,
y: y, y: y,
z: value, z: value,
@ -98,7 +98,7 @@
graph3d.draw(data, options); graph3d.draw(data, options);
// subscribe to event // subscribe to event
graph3d.on("camerapositionchange", function(event) {console.log(event);});
graph3d.on("cameraPositionChange", function(event) {console.log(event);});
} }
</script> </script>
</head> </head>
@ -131,8 +131,10 @@
<h2 id="Data_Format">Data Format</h2> <h2 id="Data_Format">Data Format</h2>
<p> <p>
Graph3d requires a vis DataSet. JSON objects are added to this DataSet by using the <code>add()</code> function.
These JSON objects have 5 fields, of which 2 are optional. These are described below.
Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
JSON objects are added to this DataSet by using the <code>add()</code> function.
Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
and can optionally have a property <code>style</code> and <code>filter</code>.
<h3>Definition</h3> <h3>Definition</h3>
<p> <p>
@ -174,7 +176,7 @@
</tr> </tr>
<tr> <tr>
<td>filter</td> <td>filter</td>
<td>anytype</td>
<td>*</td>
<td>no</td> <td>no</td>
<td>Filter values used for the animation. <td>Filter values used for the animation.
This column may have any type, such as a number, string, or Date.</td> This column may have any type, such as a number, string, or Date.</td>
@ -586,18 +588,18 @@ options = {
<p> <p>
Graph3d fires events after the camera position has been changed. Graph3d fires events after the camera position has been changed.
The event can be catched by creating a listener. The event can be catched by creating a listener.
Here an example on how to catch a <code>camerapositionchange</code> event.
Here an example on how to catch a <code>cameraPositionChange</code> event.
</p> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
function oncamerapositionchange(event) {
function onCameraPositionChange(event) {
alert("The camera position changed to:\n" + alert("The camera position changed to:\n" +
"Horizontal: " + event.horizontal + "\n" + "Horizontal: " + event.horizontal + "\n" +
"Vertical: " + event.vertical + "\n" + "Vertical: " + event.vertical + "\n" +
"Distance: " + event.distance); "Distance: " + event.distance);
} }
// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph')); // assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
graph3d.on("camerapositionchange",oncamerapositionchange);
graph3d.on("cameraPositionChange", onCameraPositionChange);
</pre> </pre>
<p> <p>
@ -616,7 +618,7 @@ graph3d.on("camerapositionchange",oncamerapositionchange);
</tr> </tr>
<tr> <tr>
<td>camerapositionchange</td>
<td>cameraPositionChange</td>
<td>The camera position changed. Fired after the user modified the camera position <td>The camera position changed. Fired after the user modified the camera position
by moving (dragging) the graph, or by zooming (scrolling), by moving (dragging) the graph, or by zooming (scrolling),
but not after a call to <code>setCameraPosition</code> method. but not after a call to <code>setCameraPosition</code> method.

+ 2
- 2
examples/graph3d/example01_basis.html View File

@ -20,7 +20,7 @@
// Called when the Visualization API is loaded. // Called when the Visualization API is loaded.
function drawVisualization() { function drawVisualization() {
// Create and populate a data table. // Create and populate a data table.
var data = [];
var data = new vis.DataSet();
// create some nice looking data with sin/cos // create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314; var axisMax = 314;
@ -28,7 +28,7 @@
for (var x = 0; x < axisMax; x+=axisStep) { for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) { for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y); var value = custom(x,y);
data.push({x:x,y:y,z:value,style:value});
data.add({x:x,y:y,z:value,style:value});
} }
} }

+ 5
- 5
examples/graph3d/example02_camera.html View File

@ -19,7 +19,7 @@
} }
// callback function, called when the camera position has changed // callback function, called when the camera position has changed
function oncamerapositionchange() {
function onCameraPositionChange() {
// adjust the values of startDate and endDate // adjust the values of startDate and endDate
var pos = graph.getCameraPosition(); var pos = graph.getCameraPosition();
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3)); document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
@ -28,7 +28,7 @@
} }
// set the camera position // set the camera position
function setcameraposition() {
function setCameraPosition() {
var horizontal = parseFloat(document.getElementById('horizontal').value); var horizontal = parseFloat(document.getElementById('horizontal').value);
var vertical = parseFloat(document.getElementById('vertical').value); var vertical = parseFloat(document.getElementById('vertical').value);
var distance = parseFloat(document.getElementById('distance').value); var distance = parseFloat(document.getElementById('distance').value);
@ -39,7 +39,7 @@
graph.setCameraPosition(pos); graph.setCameraPosition(pos);
// retrieve the camera position again, to get the applied values // retrieve the camera position again, to get the applied values
oncamerapositionchange();
onCameraPositionChange();
} }
// Called when the Visualization API is loaded. // Called when the Visualization API is loaded.
@ -76,7 +76,7 @@
// Draw our graph with the created data and options // Draw our graph with the created data and options
graph.draw(data, options); graph.draw(data, options);
graph.on("camerapositionchange", oncamerapositionchange);
graph.on("cameraPositionChange", onCameraPositionChange);
//graph.redraw(); //graph.redraw();
} }
</script> </script>
@ -99,7 +99,7 @@
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
<td><input type="button" value="Set" onclick="setcameraposition();"></td>
<td><input type="button" value="Set" onclick="setCameraPosition();"></td>
</tr> </tr>
</table> </table>

+ 3
- 3
examples/graph3d/example10_styles.html View File

@ -26,7 +26,7 @@
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1; var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table. // Create and populate a data table.
var data = new vis.DataSet();
var data = [];
// create some nice looking data with sin/cos // create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps var steps = 5; // number of datapoints will be steps*steps
@ -37,10 +37,10 @@
var z = custom(x,y); var z = custom(x,y);
if (withValue) { if (withValue) {
var value = (y - x); var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
data.push({x:x, y:y, z: z, style:value});
} }
else { else {
data.add({x:x, y:y, z: z});
data.push({x:x, y:y, z: z});
} }
} }
} }

src/graph3d/graph3d.js → src/graph3d/Graph3d.js View File

@ -556,8 +556,7 @@ Graph3d.prototype.getColumnRange = function(data,column) {
/** /**
* Initialize the data from the data table. Calculate minimum and maximum values * Initialize the data from the data table. Calculate minimum and maximum values
* and column index values * and column index values
* @param {DataSet} data The data containing the events
* for the Graph.
* @param {Array | DataSet | DataView} rawData The data containing the items for the Graph.
* @param {Number} style Style Number * @param {Number} style Style Number
*/ */
Graph3d.prototype._dataInitialize = function (rawData, style) { Graph3d.prototype._dataInitialize = function (rawData, style) {
@ -565,10 +564,17 @@ Graph3d.prototype._dataInitialize = function (rawData, style) {
if (rawData === undefined) if (rawData === undefined)
return; return;
if (Array.isArray(rawData)) {
rawData = new DataSet(rawData);
}
var data; var data;
if (rawData instanceof DataSet) {
if (rawData instanceof DataSet || rawData instanceof DataView) {
data = rawData.get(); data = rawData.get();
} }
else {
throw new Error('Array, DataSet, or DataView expected');
}
if (data.length == 0) if (data.length == 0)
return; return;
@ -665,7 +671,7 @@ Graph3d.prototype._dataInitialize = function (rawData, style) {
/** /**
* Filter the data based on the current filter * Filter the data based on the current filter
* @param {DataSet} data
* @param {Array} data
* @return {Array} dataPoints Array with point objects which can be drawn on screen * @return {Array} dataPoints Array with point objects which can be drawn on screen
*/ */
Graph3d.prototype._getDataPoints = function (data) { Graph3d.prototype._getDataPoints = function (data) {
@ -985,7 +991,7 @@ Graph3d.prototype._readData = function(data) {
/** /**
* Redraw the Graph. This needs to be executed after the start and/or * Redraw the Graph. This needs to be executed after the start and/or
* end time are changed, or when data is added or removed dynamically. * end time are changed, or when data is added or removed dynamically.
* @param {DataSet} data Optional, new data table
* @param {DataSet} [data] Optional, new data table
*/ */
Graph3d.prototype.redraw = function(data) { Graph3d.prototype.redraw = function(data) {
// load the data if needed // load the data if needed
@ -2002,9 +2008,9 @@ Graph3d.prototype._onMouseMove = function (event) {
this.camera.setArmRotation(horizontalNew, verticalNew); this.camera.setArmRotation(horizontalNew, verticalNew);
this.redraw(); this.redraw();
// fire an oncamerapositionchange event
// fire a cameraPositionChange event
var parameters = this.getCameraPosition(); var parameters = this.getCameraPosition();
this.emit('camerapositionchange', parameters);
this.emit('cameraPositionChange', parameters);
G3DpreventDefault(event); G3DpreventDefault(event);
}; };
@ -2143,9 +2149,9 @@ Graph3d.prototype._onWheel = function(event) {
this._hideTooltip(); this._hideTooltip();
} }
// fire an oncamerapositionchange event
// fire a cameraPositionChange event
var parameters = this.getCameraPosition(); var parameters = this.getCameraPosition();
this.emit('camerapositionchange', parameters);
this.emit('cameraPositionChange', parameters);
// Prevent default actions caused by mouse wheel. // Prevent default actions caused by mouse wheel.
// That might be ugly, but we handle scrolls somehow // That might be ugly, but we handle scrolls somehow
@ -2534,6 +2540,11 @@ function Filter (data, column, graph) {
// read all distinct values and select the first one // read all distinct values and select the first one
this.values = graph.getDistinctValues(data.get(), this.column); this.values = graph.getDistinctValues(data.get(), this.column);
// sort both numeric and string values correctly
this.values.sort(function (a, b) {
return a > b ? 1 : a < b ? -1 : 0;
});
if (this.values.length > 0) { if (this.values.length > 0) {
this.selectValue(0); this.selectValue(0);
} }

Loading…
Cancel
Save