jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

[Graph3d] zoomable and ctrlToZoom options (#3800) 

* zoomable and ctrlToZoom options

* fix pointer events when tooltip enabled

* configuring tooltip style options

* event check before if
develop
ripso 6 years ago
committed by Yotam Berkowitz
parent
8a231f59ee
commit
a8b9ae4308
6 changed files with 187 additions and 38 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12
    -0
      docs/graph3d/index.html
  2. +62
    -0
      examples/graph3d/13_disable_zoom.html
  3. +62
    -0
      examples/graph3d/14_zoom_ctrl_scroll.html
  4. +36
    -29
      lib/graph3d/Graph3d.js
  5. +2
    -0
      lib/graph3d/Settings.js
  6. +13
    -9
      lib/graph3d/options.js

+ 12
- 0
docs/graph3d/index.html View File

@ -769,6 +769,18 @@ var options = {
<td>z</td> <td>z</td>
<td>Label on the Z axis.</td> <td>Label on the Z axis.</td>
</tr> </tr>
<tr>
<td>zoomable</td>
<td>boolean</td>
<td>true</td>
<td>If true, the graph is zoomable.</td>
</tr>
<tr>
<td>ctrlToZoom</td>
<td>boolean</td>
<td>false</td>
<td>If true and zoomable enabled, the graph is zoomable by pressing ctrl key and scrolling mouse.</td>
</tr>
<tr> <tr>
<td>filterLabel</td> <td>filterLabel</td>
<td>String</td> <td>String</td>

+ 62
- 0
examples/graph3d/13_disable_zoom.html View File

@ -0,0 +1,62 @@
<!doctype html>
<html>
<head>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// 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 value = custom(x,y);
data.add({id:counter++,x:x,y:y,z:value,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
zoomable: false
};
// 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>

+ 62
- 0
examples/graph3d/14_zoom_ctrl_scroll.html View File

@ -0,0 +1,62 @@
<!doctype html>
<html>
<head>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// 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 value = custom(x,y);
data.add({id:counter++,x:x,y:y,z:value,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
ctrlToZoom: true
};
// 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>

+ 36
- 29
lib/graph3d/Graph3d.js View File

@ -82,13 +82,15 @@ Graph3d.DEFAULTS = {
line : { line : {
height : '40px', height : '40px',
width : '0', width : '0',
borderLeft : '1px solid #4d4d4d'
borderLeft : '1px solid #4d4d4d',
pointerEvents : 'none'
}, },
dot : { dot : {
height : '0', height : '0',
width : '0', width : '0',
border : '5px solid #4d4d4d', border : '5px solid #4d4d4d',
borderRadius : '5px'
borderRadius : '5px',
pointerEvents : 'none'
} }
}, },
@ -103,6 +105,9 @@ Graph3d.DEFAULTS = {
vertical : 0.5, vertical : 0.5,
distance : 1.7 distance : 1.7
}, },
zoomable : true,
ctrlToZoom: false,
/* /*
The following fields are 'auto by default', see above. The following fields are 'auto by default', see above.
@ -2093,38 +2098,40 @@ Graph3d.prototype._onTouchEnd = function(event) {
Graph3d.prototype._onWheel = function(event) { Graph3d.prototype._onWheel = function(event) {
if (!event) /* For IE. */ if (!event) /* For IE. */
event = window.event; event = window.event;
if (this.zoomable && (!this.ctrlToZoom || event.ctrlKey)) {
// retrieve delta
var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /* Mozilla case. */
// In Mozilla, sign of delta is different than in IE.
// Also, delta is multiple of 3.
delta = -event.detail/3;
}
// retrieve delta
var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /* Mozilla case. */
// In Mozilla, sign of delta is different than in IE.
// Also, delta is multiple of 3.
delta = -event.detail/3;
}
// If delta is nonzero, handle it.
// Basically, delta is now positive if wheel was scrolled up,
// and negative, if wheel was scrolled down.
if (delta) {
var oldLength = this.camera.getArmLength();
var newLength = oldLength * (1 - delta / 10);
// If delta is nonzero, handle it.
// Basically, delta is now positive if wheel was scrolled up,
// and negative, if wheel was scrolled down.
if (delta) {
var oldLength = this.camera.getArmLength();
var newLength = oldLength * (1 - delta / 10);
this.camera.setArmLength(newLength);
this.redraw();
this.camera.setArmLength(newLength);
this.redraw();
this._hideTooltip();
}
this._hideTooltip();
}
// fire a cameraPositionChange event
var parameters = this.getCameraPosition();
this.emit('cameraPositionChange', parameters);
// fire a cameraPositionChange event
var parameters = this.getCameraPosition();
this.emit('cameraPositionChange', parameters);
// Prevent default actions caused by mouse wheel.
// That might be ugly, but we handle scrolls somehow
// anyway, so don't bother here..
util.preventDefault(event);
// Prevent default actions caused by mouse wheel.
// That might be ugly, but we handle scrolls somehow
// anyway, so don't bother here..
util.preventDefault(event);
}
}; };
/** /**

+ 2
- 0
lib/graph3d/Settings.js View File

@ -73,6 +73,8 @@ var OPTIONKEYS = [
'gridColor', 'gridColor',
'xCenter', 'xCenter',
'yCenter', 'yCenter',
'zoomable',
'ctrlToZoom'
]; ];

+ 13
- 9
lib/graph3d/options.js View File

@ -43,6 +43,8 @@ let allOptions = {
vertical : { number }, vertical : { number },
__type__ : { object } __type__ : { object }
}, },
zoomable : { boolean: bool },
ctrlToZoom : { boolean: bool },
xCenter : { string }, xCenter : { string },
yCenter : { string }, yCenter : { string },
dataColor : colorOptions, dataColor : colorOptions,
@ -101,17 +103,19 @@ let allOptions = {
__type__ : { object } __type__ : { object }
}, },
line: { line: {
borderLeft: { string },
height : { string },
width : { string },
__type__ : { object }
borderLeft : { string },
height : { string },
width : { string },
pointerEvents: { string },
__type__ : { object }
}, },
dot: { dot: {
border : { string },
borderRadius: { string },
height : { string },
width : { string },
__type__ : { object},
border : { string },
borderRadius : { string },
height : { string },
width : { string },
pointerEvents: { string },
__type__ : { object}
}, },
__type__: { object} __type__: { object}
}, },

Write Preview
Loading…
Cancel
Save