1) Start with a new HTML file
Add appropriate JSViz imports and an empty "init()" function body:
]]><html>
<head>
<script language="JavaScript" src="../geometry/SnowflakeGraphModel.js"></script>
<script language="JavaScript" src="../layout/graph/SnowflakeLayout.js"></script>
<script language="JavaScript" src="../layout/view/HTMLGraphView.js"></script>
<script language="JavaScript" src="../layout/view/SVGGraphView.js"></script>
<script language="JavaScript" src="../util/Timer.js"></script>
<script language="JavaScript" src="../util/EventHandler.js"></script>
<script language="JavaScript" src="../io/DataGraph.js"></script>
<script language="JavaScript" src="../io/HTTP.js"></script>
<script language="JavaScript" src="../io/XMLTreeLoader.js"></script>
<script language="JavaScript">
function init() {
}
</style>
<style type="text/css">
body { margin: 0; padding: 0; }
</style>
</head>
<body onload="init()">
</body>
</html>
2) Create a new SnowflakeLayout
You can create your graph in virtually any HTML element. If you're going to place the graph in an element other than the <body>, remember that the element must have a known size and position (via element.offsetWidth, element.offsetHeight, element.offsetTop, element.offsetLeft). Append the following to "init()"
var layout = new SnowflakeLayout( document.body, true );3) Configure the layout
A configuration defines how we handle the addition of different kinds of nodes to the graph. For each "type" of node, we tell the layout how to create a "model" and "view" of the new node.
layout.config._default = {
model: function( dataNode ) {
return {
childRadius: 40,
fanAngle: dataNode.root ? 360: 100,
rootAngle: 0
}
},
The model attribute in this configuration dictates the underlying structure of our graph. For a SnowflakeModel, we need to define the following for each node:
- childRadius: the edge length to this node's children
- fanAngle: the maximum angle in which child nodes will be layed out
- rootAngle: the base angle of the graph at the origin (this is automatically determined for all child nodes)
These parameters determine how this new node will interact with other nodes in our graph. The "model" attribute of a class in our configuration must return a JavaScript Object containing these values.
view: function( dataNode, modelNode ) {
if ( layout.svg ) {
var nodeElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
nodeElement.setAttribute('stroke', '#888888');
nodeElement.setAttribute('stroke-width', '.25px');
nodeElement.setAttribute('fill', dataNode.color);
nodeElement.setAttribute('r', 6 + 'px');
nodeElement.onmousedown = new EventHandler( layout, layout.handleMouseDownEvent, modelNode.id )
return nodeElement;
} else {
var nodeElement = document.createElement( 'div' );
nodeElement.style.position = "absolute";
nodeElement.style.width = "12px";
nodeElement.style.height = "12px";
var color = dataNode.color.replace( "#", "" );
nodeElement.style.backgroundImage = "url(http://kylescholz.com/cgi-bin/bubble.pl?title=&r=12&pt=8&b=888888&c=" + color + ")";
nodeElement.innerHTML = '![]()
';
nodeElement.onmousedown = new EventHandler( layout, layout.handleMouseDownEvent, modelNode.id )
return nodeElement;
}
}
}The view defines what the nodes in our graph look like. The view attribute of a configuration class must return a DOM element -- JSViz supports most HTML and SVG elements. You can control the appearance and behavior of view elements just like any DOM element. For more details, see the comments in the example source.
4) Override the default edge properties.
This is optional, of course. The SnowflakeLayout provides a default implementation, but let's replace it with a custom edge builder that draws edges in the color of the parent node.
layout.viewEdgeBuilder = function( dataNodeSrc, dataNodeDest ) {
if ( this.svg ) {
return {
'stroke': dataNodeSrc.color,
'stroke-width': '2px',
'stroke-dasharray': '2,4'
}
} else {
return {
'pixelColor': dataNodeSrc.color,
'pixelWidth': '2px',
'pixelHeight': '2px',
'pixels': 8
}
}
}5) Instantiate a loader to process the contents of our file.
The XMLTreeLoader is included in the JSViz distribution. It builds a simple graph based on the hierarchical structure of an XML document.
var loader = new XMLTreeLoader( layout.dataGraph );
loader.load( "treedata1.xml" );For your own projects, you may write a custom loader that reads XML, JSON or other formatted data from a file or REST interface.
6) Create a builder to add all of the nodes to the graph once we've finished reading the file.
var SimpleBuilder = function() {
this.started = false;
this.update = function() {
var d = layout.dequeueNode();
if ( !this.started && d ) {
this.started=true;
while( layout.dequeueNode() ) {};
}
if ( this.started && !d ) { return false; }
}
}
var buildTimer = new Timer(0);
buildTimer.subscribe( new SimpleBuilder );
buildTimer.start();Check out the example source contains an alternate strategy for adding nodes.
We're finished. Take another look at the product.
So what can you do with JSViz 0.3.3? While we' post more examples and tutorials over the coming days and weeks, we encourage you to share your projects, ideas, and suggestions.
]]>