@ -4,8 +4,8 @@
* *
* A dynamic , browser - based visualization library . * A dynamic , browser - based visualization library .
* *
* @ version 0.6 .0 - SNAPSHOT
* @ date 2014 - 03 - 03
* @ version 0.7 .0 - SNAPSHOT
* @ date 2014 - 03 - 05
* *
* @ license * @ license
* Copyright ( C ) 2011 - 2014 Almende B . V , http : //almende.com
* Copyright ( C ) 2011 - 2014 Almende B . V , http : //almende.com
@ -2350,380 +2350,6 @@ DataView.prototype._trigger = DataSet.prototype._trigger;
DataView . prototype . subscribe = DataView . prototype . on ; DataView . prototype . subscribe = DataView . prototype . on ;
DataView . prototype . unsubscribe = DataView . prototype . off ; DataView . prototype . unsubscribe = DataView . prototype . off ;
/ * *
* Created by Alex on 2 / 27 / 14.
* /
function SvgAxis ( range , mainId , constants ) {
this . svgId = mainId ;
this . range = range ;
this . constants = constants ;
this . duration = this . range . end - this . range . start ; // in milliseconds
this . minColumnWidth = 100 ;
this . _drawElements ( ) ;
this . _update ( ) ;
}
SvgAxis . prototype . _drawElements = function ( ) {
d3 . select ( this . svgId )
. append ( "rect" )
. attr ( "id" , "bars" )
. attr ( "x" , 0 )
. attr ( "y" , 0 )
. attr ( "width" , this . constants . width )
. attr ( "height" , this . constants . barHeight )
. style ( "stroke" , "rgb(6,120,155)" ) ;
this . leftText = d3 . select ( this . svgId )
. append ( "text" )
. attr ( "x" , 5 )
. attr ( "y" , 20 )
. attr ( "font-size" , 14 )
. text ( moment ( this . range . start ) ) ;
this . rightText = d3 . select ( this . svgId )
. append ( "text" )
. attr ( "y" , 20 )
. attr ( "font-size" , 14 )
. text ( moment ( this . range . end ) )
this . rightText . attr ( "x" , this . constants . width - 5 - this . rightText . node ( ) . getBBox ( ) . width ) ;
this . dateLabels = { } ;
this . markerLines = { } ;
}
SvgAxis . prototype . _createMarkerLine = function ( index ) {
this . markerLines [ index ] = { svg : d3 . select ( "svg#main" ) . append ( "line" )
. attr ( 'y1' , 0 )
. attr ( 'y2' , this . constants . height )
. style ( "stroke" , "rgb(220,220,220)" )
}
}
SvgAxis . prototype . _createDateLabel = function ( index ) {
this . dateLabels [ index ] = { svg : d3 . select ( this . svgId )
. append ( "text" )
. attr ( "font-size" , 12 )
, active : false } ;
}
SvgAxis . prototype . _update = function ( ) {
this . duration = this . range . end - this . range . start ; // in milliseconds
this . leftText . text ( moment ( this . range . start ) . format ( "DD-MM-YYYY HH:mm:ss" ) )
this . rightText . text ( moment ( this . range . end ) . format ( "DD-MM-YYYY" ) )
this . rightText . attr ( "x" , this . constants . width - 5 - this . rightText . node ( ) . getBBox ( ) . width ) ;
this . msPerPixel = this . duration / this . constants . width ;
this . columnDuration = this . minColumnWidth * this . msPerPixel ;
var milliSecondScale = [ 1 , 10 , 50 , 100 , 250 , 500 ] ;
var secondScale = [ 1 , 5 , 15 , 30 ] ;
var minuteScale = [ 1 , 5 , 15 , 30 ] ;
var hourScale = [ 1 , 3 , 6 , 12 ] ;
var dayScale = [ 1 , 2 , 3 , 5 , 10 , 15 ] ;
var monthScale = [ 1 , 2 , 3 , 4 , 5 , 6 ] ;
var yearScale = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 15 , 20 , 25 , 50 , 75 , 100 , 150 , 250 , 500 , 1000 ] ;
var multipliers = [ 1 , 1000 , 60000 , 3600000 , 24 * 3600000 , 30 * 24 * 3600000 , 365 * 24 * 3600000 ] ;
var scales = [ milliSecondScale , secondScale , minuteScale , hourScale , dayScale , monthScale , yearScale ]
var formats = [ "SSS" , "mm:ss" , "hh:mm:ss" , "DD HH:mm" , "DD-MM" , "MM-YYYY" , "YYYY" ]
var indices = this . _getAppropriateScale ( scales , multipliers ) ;
var scale = scales [ indices [ 0 ] ] [ indices [ 1 ] ] * multipliers [ indices [ 0 ] ] ;
var dateCorrection = ( this . range . start . valueOf ( ) % scale ) + 3600000 ;
for ( var i = 0 ; i < 30 ; i ++ ) {
var date = this . range . start + i * scale - dateCorrection ;
if ( ( ( i + 1 ) * scale - dateCorrection ) / this . msPerPixel > this . constants . width + 200 ) {
if ( this . dateLabels . hasOwnProperty ( i ) ) {
this . dateLabels [ i ] . svg . remove ( ) ;
delete this . dateLabels [ i ]
}
if ( this . markerLines . hasOwnProperty ( i ) ) {
this . markerLines [ i ] . svg . remove ( ) ;
delete this . markerLines [ i ]
}
}
else {
if ( ! this . dateLabels . hasOwnProperty ( i ) ) {
this . _createDateLabel ( i ) ;
}
if ( ! this . markerLines . hasOwnProperty ( i ) ) {
this . _createMarkerLine ( i ) ;
}
this . dateLabels [ i ] . svg . text ( moment ( date ) . format ( formats [ indices [ 0 ] ] ) )
. attr ( "x" , ( i * scale - dateCorrection ) / this . msPerPixel )
. attr ( "y" , 50 )
this . markerLines [ i ] . svg . attr ( "x1" , ( i * scale - dateCorrection ) / this . msPerPixel )
. attr ( "x2" , ( i * scale - dateCorrection ) / this . msPerPixel )
}
}
}
SvgAxis . prototype . _getAppropriateScale = function ( scales , multipliers ) {
for ( var i = 0 ; i < scales . length ; i ++ ) {
for ( var j = 0 ; j < scales [ i ] . length ; j ++ ) {
if ( scales [ i ] [ j ] * multipliers [ i ] > this . columnDuration ) {
return [ i , j ]
}
}
}
}
/ * *
* @ constructor SvgTimeline
* Create a graph visualization , displaying nodes and edges .
*
* @ param { Element } container The DOM element in which the Graph will
* be created . Normally a div element .
* @ param { Object } items An object containing parameters
* { Array } nodes
* { Array } edges
* @ param { Object } options Options
* /
function SvgTimeline ( container , items , options ) {
this . constants = {
width : 1400 ,
height : 400 ,
barHeight : 60
}
var now = moment ( ) . hours ( 0 ) . minutes ( 0 ) . seconds ( 0 ) . milliseconds ( 0 ) ;
this . range = {
start : now . clone ( ) . add ( 'days' , - 3 ) . valueOf ( ) ,
end : now . clone ( ) . add ( 'days' , 4 ) . valueOf ( )
}
this . items = { } ;
this . sortedItems = [ ] ;
this . activeItems = { } ;
this . sortedActiveItems = [ ] ;
this . _createItems ( items ) ;
this . container = container ;
this . _createSVG ( ) ;
this . axis = new SvgAxis ( this . range , "svg#main" , this . constants ) ;
var me = this ;
this . hammer = Hammer ( document . getElementById ( "main" ) , {
prevent_default : true
} ) ;
this . hammer . on ( 'tap' , me . _onTap . bind ( me ) ) ;
this . hammer . on ( 'doubletap' , me . _onDoubleTap . bind ( me ) ) ;
this . hammer . on ( 'hold' , me . _onHold . bind ( me ) ) ;
this . hammer . on ( 'pinch' , me . _onPinch . bind ( me ) ) ;
this . hammer . on ( 'touch' , me . _onTouch . bind ( me ) ) ;
this . hammer . on ( 'dragstart' , me . _onDragStart . bind ( me ) ) ;
this . hammer . on ( 'drag' , me . _onDrag . bind ( me ) ) ;
this . hammer . on ( 'dragend' , me . _onDragEnd . bind ( me ) ) ;
this . hammer . on ( 'release' , me . _onRelease . bind ( me ) ) ;
this . hammer . on ( 'mousewheel' , me . _onMouseWheel . bind ( me ) ) ;
this . hammer . on ( 'DOMMouseScroll' , me . _onMouseWheel . bind ( me ) ) ; // for FF
this . hammer . on ( 'mousemove' , me . _onMouseMoveTitle . bind ( me ) ) ;
//this._drawLines();
this . _update ( ) ;
}
SvgTimeline . prototype . _createSVG = function ( ) {
d3 . select ( "div#visualization" )
. append ( "svg" ) . attr ( "id" , "main" )
. attr ( "width" , this . constants . width )
. attr ( "height" , this . constants . height )
. attr ( "style" , "border:1px solid black" )
} ;
SvgTimeline . prototype . _createItems = function ( items ) {
for ( var i = 0 ; i < items . length ; i ++ ) {
this . items [ items [ i ] . id ] = new Item ( items [ i ] , this . constants ) ;
this . sortedItems . push ( this . items [ items [ i ] . id ] ) ;
}
this . _sortItems ( this . sortedItems ) ;
}
SvgTimeline . prototype . _sortItems = function ( items ) {
items . sort ( function ( a , b ) { return a . start - b . start } ) ;
}
SvgTimeline . prototype . _getPointer = function ( touch ) {
return {
x : touch . pageX ,
y : touch . pageY
} ;
} ;
SvgTimeline . prototype . _onTap = function ( ) { } ;
SvgTimeline . prototype . _onDoubleTap = function ( ) { } ;
SvgTimeline . prototype . _onHold = function ( ) { } ;
SvgTimeline . prototype . _onPinch = function ( ) { } ;
SvgTimeline . prototype . _onTouch = function ( event ) { } ;
SvgTimeline . prototype . _onDragStart = function ( event ) {
this . initialDragPos = this . _getPointer ( event . gesture . center ) ;
} ;
SvgTimeline . prototype . _onDrag = function ( event ) {
var pointer = this . _getPointer ( event . gesture . center ) ;
var diffX = pointer . x - this . initialDragPos . x ;
// var diffY = pointer.y - this.initialDragPos.y;
this . initialDragPos = pointer ;
this . range . start -= diffX * this . axis . msPerPixel ;
this . range . end -= diffX * this . axis . msPerPixel ;
this . _update ( ) ;
} ;
SvgTimeline . prototype . _onDragEnd = function ( ) { } ;
SvgTimeline . prototype . _onRelease = function ( ) { } ;
SvgTimeline . prototype . _onMouseWheel = function ( event ) {
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 ) {
var pointer = { x : event . x , y : event . y }
var center = this . range . start + this . axis . duration * 0.5 ;
var zoomSpeed = 0.1 ;
var scrollSpeed = 0.1 ;
this . range . start = center - 0.5 * ( this . axis . duration * ( 1 - delta * zoomSpeed ) ) ;
this . range . end = this . range . start + ( this . axis . duration * ( 1 - delta * zoomSpeed ) ) ;
var diffX = delta * ( pointer . x - 0.5 * this . constants . width ) ;
// var diffY = pointer.y - this.initialDragPos.y;
this . range . start -= diffX * this . axis . msPerPixel * scrollSpeed ;
this . range . end -= diffX * this . axis . msPerPixel * scrollSpeed ;
this . _update ( ) ;
}
} ;
SvgTimeline . prototype . _onMouseMoveTitle = function ( ) { } ;
SvgTimeline . prototype . _update = function ( ) {
this . axis . _update ( ) ;
this . _getActiveItems ( ) ;
this . _updateItems ( ) ;
} ;
SvgTimeline . prototype . _getActiveItems = function ( ) {
// reset all currently active items to inactive
for ( var itemId in this . activeItems ) {
if ( this . activeItems . hasOwnProperty ( itemId ) ) {
this . activeItems [ itemId ] . active = false ;
}
}
this . sortedActiveItems = [ ]
var rangeStart = this . range . start - 200 * this . axis . msPerPixel
var rangeEnd = ( this . range . end + 200 * this . axis . msPerPixel )
for ( var itemId in this . items ) {
if ( this . items . hasOwnProperty ( itemId ) ) {
if ( this . items [ itemId ] . start >= rangeStart && this . items [ itemId ] . start < rangeEnd ||
this . items [ itemId ] . end >= rangeStart && this . items [ itemId ] . end < rangeEnd ) {
if ( this . items [ itemId ] . active == false ) {
this . activeItems [ itemId ] = this . items [ itemId ] ;
}
this . activeItems [ itemId ] . active = true ;
this . sortedActiveItems . push ( this . activeItems [ itemId ] ) ;
}
}
}
this . _sortItems ( this . sortedActiveItems ) ;
// cleanup
for ( var itemId in this . activeItems ) {
if ( this . activeItems . hasOwnProperty ( itemId ) ) {
if ( this . activeItems [ itemId ] . active == false ) {
this . activeItems [ itemId ] . svg . remove ( ) ;
this . activeItems [ itemId ] . svg = null ;
this . activeItems [ itemId ] . svgLine . remove ( ) ;
this . activeItems [ itemId ] . svgLine = null ;
delete this . activeItems [ itemId ] ;
}
}
}
} ;
SvgTimeline . prototype . _updateItems = function ( ) {
for ( var i = 0 ; i < this . sortedActiveItems . length ; i ++ ) {
var item = this . sortedActiveItems [ i ] ;
if ( item . svg == null ) {
// item.svg = d3.select("svg#main")
// .append("rect")
// .attr("class","item")
// .style("stroke", "rgb(6,120,155)")
// .style("fill", "rgb(6,120,155)");
item . svg = d3 . select ( "svg#main" )
. append ( "foreignObject" )
item . svgContent = item . svg . append ( "xhtml:body" )
. style ( "font" , "14px 'Helvetica Neue'" )
. style ( "background-color" , "#ff00ff" )
. html ( "<h1>An HTML Foreign Object in SVG</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Quisque nisi risus, sagittis quis tempor nec, aliquam eget neque. Nulla bibendum semper lorem non ullamcorper. Nulla non ligula lorem. Praesent porttitor, tellus nec suscipit aliquam, enim elit posuere lorem, at laoreet enim ligula sed tortor. Ut sodales, urna a aliquam semper, nibh diam gravida sapien, sit amet fermentum purus lacus eget massa. Donec ac arcu vel magna consequat pretium et vel ligula. Donec sit amet erat elit. Vivamus eu metus eget est hendrerit rutrum. Curabitur vitae orci et leo interdum egestas ut sit amet dui. In varius enim ut sem posuere in tristique metus ultrices.<p>Integer mollis massa at orci porta vestibulum. Pellentesque dignissim turpis ut tortor ultricies condimentum et quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lorem vulputate dui pharetra luctus. Sed vulputate, nunc quis porttitor scelerisque, dui est varius ipsum, eu blandit mauris nibh pellentesque tortor. Vivamus ultricies ante eget ipsum pulvinar ac tempor turpis mollis. Morbi tortor orci, euismod vel sagittis ac, lobortis nec est. Quisque euismod venenatis felis at dapibus. Vestibulum dignissim nulla ut nisi tristique porttitor. Proin et nunc id arcu cursus dapibus non quis libero. Nunc ligula mi, bibendum non mattis nec, luctus id neque. Suspendisse ut eros lacus. Praesent eget lacus eget risus congue vestibulum. Morbi tincidunt pulvinar lacus sed faucibus. Phasellus sed vestibulum sapien." ) ;
if ( item . end == 0 ) {
item . svgLine = d3 . select ( "svg#main" )
. append ( "line" )
. attr ( "y1" , this . constants . barHeight )
. style ( "stroke" , "rgb(200,200,255)" )
. style ( "stroke-width" , 3 )
}
}
item . svg . attr ( 'width' , item . getLength ( this . axis . msPerPixel ) )
. attr ( "x" , this . _getXforItem ( item ) )
. attr ( "y" , this . _getYforItem ( item , i ) )
. attr ( 'height' , 25 )
if ( item . end == 0 ) {
item . svgLine . attr ( 'y2' , item . y )
. attr ( 'x1' , item . timeX )
. attr ( 'x2' , item . timeX )
}
}
} ;
SvgTimeline . prototype . _getXforItem = function ( item ) {
item . timeX = ( item . start - this . range . start ) / this . axis . msPerPixel ;
if ( item . end == 0 ) {
item . drawX = item . timeX - item . width * 0.5 ;
}
else {
item . drawX = item . timeX ;
}
return item . drawX ;
}
SvgTimeline . prototype . _getYforItem = function ( item , index ) {
var bounds = 10 ;
var startIndex = Math . max ( 0 , index - bounds ) ;
item . level = 0 ;
for ( var i = startIndex ; i < index ; i ++ ) {
var item2 = this . sortedActiveItems [ i ] ;
if ( item . drawX <= ( item2 . drawX + item2 . width + 5 ) && item2 . level == item . level ) {
item . level += 1 ;
}
}
item . y = 100 + 50 * item . level ;
return item . y ;
}
/ * * / * *
* @ constructor TimeStep * @ constructor TimeStep
* The class TimeStep is an iterator for dates . You provide a start date and an * The class TimeStep is an iterator for dates . You provide a start date and an
@ -11019,14 +10645,21 @@ Edge.prototype._drawLine = function(ctx) {
ctx . strokeStyle = this . color ; ctx . strokeStyle = this . color ;
ctx . lineWidth = this . _getLineWidth ( ) ; ctx . lineWidth = this . _getLineWidth ( ) ;
var point ;
if ( this . from != this . to ) { if ( this . from != this . to ) {
// draw line
// draw line
this . _line ( ctx ) ; this . _line ( ctx ) ;
// draw label
// draw label
var point ;
if ( this . label ) { if ( this . label ) {
point = this . _pointOnLine ( 0.5 ) ;
if ( this . smooth == true ) {
var midpointX = 0.5 * ( 0.5 * ( this . from . x + this . via . x ) + 0.5 * ( this . to . x + this . via . x ) ) ;
var midpointY = 0.5 * ( 0.5 * ( this . from . y + this . via . y ) + 0.5 * ( this . to . y + this . via . y ) ) ;
point = { x : midpointX , y : midpointY } ;
}
else {
point = this . _pointOnLine ( 0.5 ) ;
}
this . _label ( ctx , this . label , point . x , point . y ) ; this . _label ( ctx , this . label , point . x , point . y ) ;
} }
} }
@ -11209,7 +10842,15 @@ Edge.prototype._drawDashLine = function(ctx) {
// draw label
// draw label
if ( this . label ) { if ( this . label ) {
var point = this . _pointOnLine ( 0.5 ) ;
var point ;
if ( this . smooth == true ) {
var midpointX = 0.5 * ( 0.5 * ( this . from . x + this . via . x ) + 0.5 * ( this . to . x + this . via . x ) ) ;
var midpointY = 0.5 * ( 0.5 * ( this . from . y + this . via . y ) + 0.5 * ( this . to . y + this . via . y ) ) ;
point = { x : midpointX , y : midpointY } ;
}
else {
point = this . _pointOnLine ( 0.5 ) ;
}
this . _label ( ctx , this . label , point . x , point . y ) ; this . _label ( ctx , this . label , point . x , point . y ) ;
} }
} ; } ;
@ -11280,7 +10921,6 @@ Edge.prototype._drawArrowCenter = function(ctx) {
// draw label
// draw label
if ( this . label ) { if ( this . label ) {
point = this . _pointOnLine ( 0.5 ) ;
this . _label ( ctx , this . label , point . x , point . y ) ; this . _label ( ctx , this . label , point . x , point . y ) ;
} }
} }
@ -11384,7 +11024,15 @@ Edge.prototype._drawArrow = function(ctx) {
// draw label
// draw label
if ( this . label ) { if ( this . label ) {
var point = this . _pointOnLine ( 0.5 ) ;
var point ;
if ( this . smooth == true ) {
var midpointX = 0.5 * ( 0.5 * ( this . from . x + this . via . x ) + 0.5 * ( this . to . x + this . via . x ) ) ;
var midpointY = 0.5 * ( 0.5 * ( this . from . y + this . via . y ) + 0.5 * ( this . to . y + this . via . y ) ) ;
point = { x : midpointX , y : midpointY } ;
}
else {
point = this . _pointOnLine ( 0.5 ) ;
}
this . _label ( ctx , this . label , point . x , point . y ) ; this . _label ( ctx , this . label , point . x , point . y ) ;
} }
} }
@ -12048,6 +11696,7 @@ var physicsMixin = {
* / * /
_loadPhysicsConfiguration : function ( ) { _loadPhysicsConfiguration : function ( ) {
if ( this . physicsConfiguration === undefined ) { if ( this . physicsConfiguration === undefined ) {
var hierarchicalLayoutDirections = [ "LR" , "RL" , "UD" , "DU" ] ;
this . physicsConfiguration = document . createElement ( 'div' ) ; this . physicsConfiguration = document . createElement ( 'div' ) ;
this . physicsConfiguration . className = "PhysicsConfiguration" ; this . physicsConfiguration . className = "PhysicsConfiguration" ;
this . physicsConfiguration . innerHTML = '' + this . physicsConfiguration . innerHTML = '' +
@ -12061,127 +11710,109 @@ var physicsMixin = {
'<table id="graph_BH_table" style="display:none">' + '<table id="graph_BH_table" style="display:none">' +
'<tr><td><b>Barnes Hut</b></td></tr>' + '<tr><td><b>Barnes Hut</b></td></tr>' +
'<tr>' + '<tr>' +
'<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="500" max="20000" value="2000 " step="25" style="width:300px" id="graph_BH_gc"></td><td width="50px">-20000</td><td><input value="-2000 " id="graph_BH_gc_value" style="width:60px"></td>' +
'<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="500" max="20000" value="' + ( - 1 * this . constants . physics . barnesHut . gravitationalConstant ) + ' " step="25" style="width:300px" id="graph_BH_gc"></td><td width="50px">-20000</td><td><input value="' + ( - 1 * this . constants . physics . barnesHut . gravitationalConstant ) + ' " id="graph_BH_gc_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="0.3 " step="0.05" style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="0.03 " id="graph_BH_cg_value" style="width:60px"></td>' +
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this . constants . physics . barnesHut . centralGravity + ' " step="0.05" style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="' + this . constants . physics . barnesHut . centralGravity + ' " id="graph_BH_cg_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="100 " step="1" style="width:300px" id="graph_BH_sl"></td><td>500</td><td><input value="100 " id="graph_BH_sl_value" style="width:60px"></td>' +
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this . constants . physics . barnesHut . springLength + ' " step="1" style="width:300px" id="graph_BH_sl"></td><td>500</td><td><input value="' + this . constants . physics . barnesHut . springLength + ' " id="graph_BH_sl_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="0.05" step="0.005 " style="width:300px" id="graph_BH_sc"></td><td>0.5</td><td><input value="0.05 " id="graph_BH_sc_value" style="width:60px"></td>' +
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this . constants . physics . barnesHut . springConstant + '" step="0.001 " style="width:300px" id="graph_BH_sc"></td><td>0.5</td><td><input value="' + this . constants . physics . barnesHut . springConstant + ' " id="graph_BH_sc_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="0.09 " step="0.005" style="width:300px" id="graph_BH_damp"></td><td>0.3</td><td><input value="0.09 " id="graph_BH_damp_value" style="width:60px"></td>' +
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this . constants . physics . barnesHut . damping + ' " step="0.005" style="width:300px" id="graph_BH_damp"></td><td>0.3</td><td><input value="' + this . constants . physics . barnesHut . damping + ' " id="graph_BH_damp_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'</table>' + '</table>' +
'<table id="graph_R_table" style="display:none">' + '<table id="graph_R_table" style="display:none">' +
'<tr><td><b>Repulsion</b></td></tr>' + '<tr><td><b>Repulsion</b></td></tr>' +
'<tr>' + '<tr>' +
'<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="100 " step="1" style="width:300px" id="graph_R_nd"></td><td width="50px">300</td><td><input value="100 " id="graph_R_nd_value" style="width:60px"></td>' +
'<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this . constants . physics . repulsion . nodeDistance + ' " step="1" style="width:300px" id="graph_R_nd"></td><td width="50px">300</td><td><input value="' + this . constants . physics . repulsion . nodeDistance + ' " id="graph_R_nd_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="0.1 " step="0.05" style="width:300px" id="graph_R_cg"></td><td>3</td><td><input value="0.01 " id="graph_R_cg_value" style="width:60px"></td>' +
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this . constants . physics . repulsion . centralGravity + ' " step="0.05" style="width:300px" id="graph_R_cg"></td><td>3</td><td><input value="' + this . constants . physics . repulsion . centralGravity + ' " id="graph_R_cg_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="200 " step="1" style="width:300px" id="graph_R_sl"></td><td>500</td><td><input value="200 " id="graph_R_sl_value" style="width:60px"></td>' +
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this . constants . physics . repulsion . springLength + ' " step="1" style="width:300px" id="graph_R_sl"></td><td>500</td><td><input value="' + this . constants . physics . repulsion . springLength + ' " id="graph_R_sl_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="0.05" step="0.005 " style="width:300px" id="graph_R_sc"></td><td>0.5</td><td><input value="0.05 " id="graph_R_sc_value" style="width:60px"></td>' +
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this . constants . physics . repulsion . springConstant + '" step="0.001 " style="width:300px" id="graph_R_sc"></td><td>0.5</td><td><input value="' + this . constants . physics . repulsion . springConstant + ' " id="graph_R_sc_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="0.09 " step="0.005" style="width:300px" id="graph_R_damp"></td><td>0.3</td><td><input value="0.09 " id="graph_R_damp_value" style="width:60px"></td>' +
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this . constants . physics . repulsion . damping + ' " step="0.005" style="width:300px" id="graph_R_damp"></td><td>0.3</td><td><input value="' + this . constants . physics . repulsion . damping + ' " id="graph_R_damp_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'</table>' + '</table>' +
'<table id="graph_H_table" style="display:none">' + '<table id="graph_H_table" style="display:none">' +
'<tr><td width="150"><b>Hierarchical</b></td></tr>' + '<tr><td width="150"><b>Hierarchical</b></td></tr>' +
'<tr>' + '<tr>' +
'<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="60 " step="1" style="width:300px" id="graph_H_nd"></td><td width="50px">300</td><td><input value="60 " id="graph_H_nd_value" style="width:60px"></td>' +
'<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this . constants . physics . hierarchicalRepulsion . nodeDistance + ' " step="1" style="width:300px" id="graph_H_nd"></td><td width="50px">300</td><td><input value="' + this . constants . physics . hierarchicalRepulsion . nodeDistance + ' " id="graph_H_nd_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="0 " step="0.05" style="width:300px" id="graph_H_cg"></td><td>3</td><td><input value="0 " id="graph_H_cg_value" style="width:60px"></td>' +
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this . constants . physics . hierarchicalRepulsion . centralGravity + ' " step="0.05" style="width:300px" id="graph_H_cg"></td><td>3</td><td><input value="' + this . constants . physics . hierarchicalRepulsion . centralGravity + ' " id="graph_H_cg_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="100 " step="1" style="width:300px" id="graph_H_sl"></td><td>500</td><td><input value="100 " id="graph_H_sl_value" style="width:60px"></td>' +
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this . constants . physics . hierarchicalRepulsion . springLength + ' " step="1" style="width:300px" id="graph_H_sl"></td><td>500</td><td><input value="' + this . constants . physics . hierarchicalRepulsion . springLength + ' " id="graph_H_sl_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="0.01" step="0.005 " style="width:300px" id="graph_H_sc"></td><td>0.5</td><td><input value="0.01 " id="graph_H_sc_value" style="width:60px"></td>' +
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this . constants . physics . hierarchicalRepulsion . springConstant + '" step="0.001 " style="width:300px" id="graph_H_sc"></td><td>0.5</td><td><input value="' + this . constants . physics . hierarchicalRepulsion . springConstant + ' " id="graph_H_sc_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="0.09 " step="0.005" style="width:300px" id="graph_H_damp"></td><td>0.3</td><td><input value="0.09 " id="graph_H_damp_value" style="width:60px"></td>' +
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this . constants . physics . hierarchicalRepulsion . damping + ' " step="0.005" style="width:300px" id="graph_H_damp"></td><td>0.3</td><td><input value="' + this . constants . physics . hierarchicalRepulsion . damping + ' " id="graph_H_damp_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">direction</td><td>1</td><td><input type="range" min="0" max="3" value="0 " step="1" style="width:300px" id="graph_H_direction"></td><td>4</td><td><input value="LR " id="graph_H_direction_value" style="width:60px"></td>' +
'<td width="150px">direction</td><td>1</td><td><input type="range" min="0" max="3" value="' + hierarchicalLayoutDirections . indexOf ( this . constants . hierarchicalLayout . direction ) + ' " step="1" style="width:300px" id="graph_H_direction"></td><td>4</td><td><input value="' + this . constants . hierarchicalLayout . direction + ' " id="graph_H_direction_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">levelSeparation</td><td>1</td><td><input type="range" min="0" max="500 " value="150" step="1" style="width:300px" id="graph_H_levsep"></td><td>500</td><td><input value="150 " id="graph_H_levsep_value" style="width:60px"></td>' +
'<td width="150px">levelSeparation</td><td>1</td><td><input type="range" min="0" max="' + this . constants . hierarchicalLayout . levelSeparation + ' " value="150" step="1" style="width:300px" id="graph_H_levsep"></td><td>500</td><td><input value="' + this . constants . hierarchicalLayout . levelSeparation + ' " id="graph_H_levsep_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td width="150px">nodeSpacing</td><td>1</td><td><input type="range" min="0" max="500 " value="100" step="1" style="width:300px" id="graph_H_nspac"></td><td>500</td><td><input value="100 " id="graph_H_nspac_value" style="width:60px"></td>' +
'<td width="150px">nodeSpacing</td><td>1</td><td><input type="range" min="0" max="' + this . constants . hierarchicalLayout . nodeSpacing + ' " value="100" step="1" style="width:300px" id="graph_H_nspac"></td><td>500</td><td><input value="' + this . constants . hierarchicalLayout . nodeSpacing + ' " id="graph_H_nspac_value" style="width:60px"></td>' +
'</tr>' + '</tr>' +
'</table>' '</table>'
this . containerElement . parentElement . insertBefore ( this . physicsConfiguration , this . containerElement ) ; this . containerElement . parentElement . insertBefore ( this . physicsConfiguration , this . containerElement ) ;
var hierarchicalLayoutDirections = [ "LR" , "RL" , "UD" , "DU" ] ;
var rangeElement ; var rangeElement ;
rangeElement = document . getElementById ( 'graph_BH_gc' ) ; rangeElement = document . getElementById ( 'graph_BH_gc' ) ;
rangeElement . innerHTML = this . constants . physics . barnesHut . gravitationalConstant ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_gc' , - 1 , "physics_barnesHut_gravitationalConstant" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_gc' , - 1 , "physics_barnesHut_gravitationalConstant" ) ;
rangeElement = document . getElementById ( 'graph_BH_cg' ) ; rangeElement = document . getElementById ( 'graph_BH_cg' ) ;
rangeElement . innerHTML = this . constants . physics . barnesHut . centralGravity ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_cg' , 1 , "physics_centralGravity" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_cg' , 1 , "physics_centralGravity" ) ;
rangeElement = document . getElementById ( 'graph_BH_sc' ) ; rangeElement = document . getElementById ( 'graph_BH_sc' ) ;
rangeElement . innerHTML = this . constants . physics . barnesHut . springConstant ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_sc' , 1 , "physics_springConstant" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_sc' , 1 , "physics_springConstant" ) ;
rangeElement = document . getElementById ( 'graph_BH_sl' ) ; rangeElement = document . getElementById ( 'graph_BH_sl' ) ;
rangeElement . innerHTML = this . constants . physics . barnesHut . springLength ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_sl' , 1 , "physics_springLength" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_sl' , 1 , "physics_springLength" ) ;
rangeElement = document . getElementById ( 'graph_BH_damp' ) ; rangeElement = document . getElementById ( 'graph_BH_damp' ) ;
rangeElement . innerHTML = this . constants . physics . barnesHut . damping ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_damp' , 1 , "physics_damping" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_BH_damp' , 1 , "physics_damping" ) ;
rangeElement = document . getElementById ( 'graph_R_nd' ) ; rangeElement = document . getElementById ( 'graph_R_nd' ) ;
rangeElement . innerHTML = this . constants . physics . repulsion . nodeDistance ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_nd' , 1 , "physics_repulsion_nodeDistance" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_nd' , 1 , "physics_repulsion_nodeDistance" ) ;
rangeElement = document . getElementById ( 'graph_R_cg' ) ; rangeElement = document . getElementById ( 'graph_R_cg' ) ;
rangeElement . innerHTML = this . constants . physics . repulsion . centralGravity ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_cg' , 1 , "physics_centralGravity" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_cg' , 1 , "physics_centralGravity" ) ;
rangeElement = document . getElementById ( 'graph_R_sc' ) ; rangeElement = document . getElementById ( 'graph_R_sc' ) ;
rangeElement . innerHTML = this . constants . physics . repulsion . springConstant ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_sc' , 1 , "physics_springConstant" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_sc' , 1 , "physics_springConstant" ) ;
rangeElement = document . getElementById ( 'graph_R_sl' ) ; rangeElement = document . getElementById ( 'graph_R_sl' ) ;
rangeElement . innerHTML = this . constants . physics . repulsion . springLength ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_sl' , 1 , "physics_springLength" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_sl' , 1 , "physics_springLength" ) ;
rangeElement = document . getElementById ( 'graph_R_damp' ) ; rangeElement = document . getElementById ( 'graph_R_damp' ) ;
rangeElement . innerHTML = this . constants . physics . repulsion . damping ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_damp' , 1 , "physics_damping" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_R_damp' , 1 , "physics_damping" ) ;
rangeElement = document . getElementById ( 'graph_H_nd' ) ; rangeElement = document . getElementById ( 'graph_H_nd' ) ;
rangeElement . innerHTML = this . constants . physics . hierarchicalRepulsion . nodeDistance ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_nd' , 1 , "physics_hierarchicalRepulsion_nodeDistance" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_nd' , 1 , "physics_hierarchicalRepulsion_nodeDistance" ) ;
rangeElement = document . getElementById ( 'graph_H_cg' ) ; rangeElement = document . getElementById ( 'graph_H_cg' ) ;
rangeElement . innerHTML = this . constants . physics . hierarchicalRepulsion . centralGravity ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_cg' , 1 , "physics_centralGravity" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_cg' , 1 , "physics_centralGravity" ) ;
rangeElement = document . getElementById ( 'graph_H_sc' ) ; rangeElement = document . getElementById ( 'graph_H_sc' ) ;
rangeElement . innerHTML = this . constants . physics . hierarchicalRepulsion . springConstant ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_sc' , 1 , "physics_springConstant" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_sc' , 1 , "physics_springConstant" ) ;
rangeElement = document . getElementById ( 'graph_H_sl' ) ; rangeElement = document . getElementById ( 'graph_H_sl' ) ;
rangeElement . innerHTML = this . constants . physics . hierarchicalRepulsion . springLength ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_sl' , 1 , "physics_springLength" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_sl' , 1 , "physics_springLength" ) ;
rangeElement = document . getElementById ( 'graph_H_damp' ) ; rangeElement = document . getElementById ( 'graph_H_damp' ) ;
rangeElement . innerHTML = this . constants . physics . hierarchicalRepulsion . damping ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_damp' , 1 , "physics_damping" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_damp' , 1 , "physics_damping" ) ;
rangeElement = document . getElementById ( 'graph_H_direction' ) ; rangeElement = document . getElementById ( 'graph_H_direction' ) ;
rangeElement . innerHTML = hierarchicalLayoutDirections . indexOf ( this . constants . hierarchicalLayout . direction ) ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_direction' , hierarchicalLayoutDirections , "hierarchicalLayout_direction" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_direction' , hierarchicalLayoutDirections , "hierarchicalLayout_direction" ) ;
rangeElement = document . getElementById ( 'graph_H_levsep' ) ; rangeElement = document . getElementById ( 'graph_H_levsep' ) ;
rangeElement . innerHTML = this . constants . hierarchicalLayout . levelSeparation ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_levsep' , 1 , "hierarchicalLayout_levelSeparation" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_levsep' , 1 , "hierarchicalLayout_levelSeparation" ) ;
rangeElement = document . getElementById ( 'graph_H_nspac' ) ; rangeElement = document . getElementById ( 'graph_H_nspac' ) ;
rangeElement . innerHTML = this . constants . hierarchicalLayout . nodeSpacing ;
rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_nspac' , 1 , "hierarchicalLayout_nodeSpacing" ) ; rangeElement . onchange = showValueOfRange . bind ( this , 'graph_H_nspac' , 1 , "hierarchicalLayout_nodeSpacing" ) ;
var radioButton1 = document . getElementById ( "graph_physicsMethod1" ) ; var radioButton1 = document . getElementById ( "graph_physicsMethod1" ) ;
@ -16524,8 +16155,6 @@ Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
} }
this . pinch . mousewheelScale = zoomLevel ;
this . _setScale ( zoomLevel ) ; this . _setScale ( zoomLevel ) ;
this . _centerGraph ( range ) ; this . _centerGraph ( range ) ;
if ( disableStart == false ) { if ( disableStart == false ) {
@ -17127,7 +16756,6 @@ Graph.prototype._zoom = function(scale, pointer) {
this . areaCenter = { "x" : this . _canvasToX ( pointer . x ) , this . areaCenter = { "x" : this . _canvasToX ( pointer . x ) ,
"y" : this . _canvasToY ( pointer . y ) } ; "y" : this . _canvasToY ( pointer . y ) } ;
this . pinch . mousewheelScale = scale ;
this . _setScale ( scale ) ; this . _setScale ( scale ) ;
this . _setTranslation ( tx , ty ) ; this . _setTranslation ( tx , ty ) ;
this . updateClustersDefault ( ) ; this . updateClustersDefault ( ) ;
@ -17159,12 +16787,9 @@ Graph.prototype._onMouseWheel = function(event) {
// Basically, delta is now positive if wheel was scrolled up,
// Basically, delta is now positive if wheel was scrolled up,
// and negative, if wheel was scrolled down.
// and negative, if wheel was scrolled down.
if ( delta ) { if ( delta ) {
if ( ! ( 'mousewheelScale' in this . pinch ) ) {
this . pinch . mousewheelScale = 1 ;
}
// calculate the new scale
// calculate the new scale
var scale = this . pinch . mousewheelScale ;
var scale = this . _getScale ( ) ;
var zoom = delta / 10 ; var zoom = delta / 10 ;
if ( delta < 0 ) { if ( delta < 0 ) {
zoom = zoom / ( 1 - zoom ) ; zoom = zoom / ( 1 - zoom ) ;
@ -17177,9 +16802,6 @@ Graph.prototype._onMouseWheel = function(event) {
// apply the new scale
// apply the new scale
this . _zoom ( scale , pointer ) ; this . _zoom ( scale , pointer ) ;
// store the new, applied scale -- this is now done in _zoom
// this.pinch.mousewheelScale = scale;
} }
// Prevent default actions caused by mouse wheel.
// Prevent default actions caused by mouse wheel.
@ -17324,7 +16946,7 @@ Graph.prototype.setSize = function(width, height) {
this . manipulationDiv . style . width = this . frame . canvas . clientWidth ; this . manipulationDiv . style . width = this . frame . canvas . clientWidth ;
} }
this . emit ( 'f rameR esize' , { width : this . frame . canvas . width , height : this . frame . canvas . height } ) ;
this . emit ( 'resize' , { width : this . frame . canvas . width , height : this . frame . canvas . height } ) ;
} ; } ;
/ * * / * *
@ -17953,6 +17575,9 @@ Graph.prototype._animationStep = function() {
} ; } ;
window . requestAnimationFrame = window . requestAnimationFrame || window . mozRequestAnimationFrame ||
window . webkitRequestAnimationFrame || window . msRequestAnimationFrame ;
/ * * / * *
* Schedule a animation step with the refreshrate interval . * Schedule a animation step with the refreshrate interval .
* *
@ -17960,8 +17585,8 @@ Graph.prototype._animationStep = function() {
* / * /
Graph . prototype . start = function ( ) { Graph . prototype . start = function ( ) {
if ( this . moving || this . xIncrement != 0 || this . yIncrement != 0 || this . zoomIncrement != 0 ) { if ( this . moving || this . xIncrement != 0 || this . yIncrement != 0 || this . zoomIncrement != 0 ) {
if ( ! this . timer ) {
this . timer = window . setTimeout ( this . _animationStep . bind ( this ) , this . renderTimestep ) ; // wait this.renderTimeStep milliseconds and perform the animation step function
if ( ! this . timer ) {
this . timer = window . requestAnimationFrame ( this . _animationStep . bind ( this ) , this . renderTimestep ) ; // wait this.renderTimeStep milliseconds and perform the animation step function
} }
} }
else { else {
josdejong
10 years ago
