Allowing a default size on the graph

README.md

@@ -51,12 +51,28 @@ graph.connect('peer1', 'peer2')
 
 > In graph theory, a directed graph (or digraph) is a graph that is a set of vertices connected by edges, where the edges have a direction associated with them.
 
-### graph = new Graph(rootElem)
+### graph = new Graph(rootElem, size)
 
 Create a new P2P graph at the root DOM element `rootElem`. In addition to an
 `Element`, a query selector string (like `'.my-cool-element'`) can also be passed
 in.
 
+Also, you can pass in an object containing the desired width and height. The possible values for both are `auto`, `default` or a number (which represents the number of pixels). Aditionally you can pass in a function that evaluates on resize.
+- auto: Adjusts to the maximum existing space inside the `rootElem`
+- default: Height adjusts to 400 px on widescreens and 250 px on small screens
+Example:
+```
+var Graph = require('p2p-graph')
+//default
+var graph = new Graph('.root', {height: 'default', width: 'default'})
+//auto
+var graph = new Graph('.root', {height: 'auto', width: 'auto'})
+//fixed
+var graph = new Graph('.root', {height: 200, width: 400})
+//function
+var graph = new Graph('.root', {height: function () { ... }, width: function () { ... }})
+```
+
 ### graph.add(peer)
 
 Add a peer to the graph. The `peer` object should contain:

index.js

@@ -31,13 +31,18 @@ var COLORS = {
   }
 }
 
-function TorrentGraph (root) {
+function TorrentGraph (root, size) {
   if (typeof root === 'string') root = document.querySelector(root)
   var model = {
     nodes: [],
     links: []
   }
 
+  if (size) {
+    if (size.height && typeof size.height !== 'function' && size.height !== 'default' && size.height !== 'auto' && typeof size.height !== 'number') throw new Error('Height should be a Number or a Function')
+    if (size.width && size.width !== 'default' && typeof size.width !== 'function' && size.width !== 'auto' && typeof size.width !== 'number') throw new Error('Width should be a Number of a Function')
+  }
+
   function scale () {
     var len = model.nodes.length
     return len < 10
@@ -56,8 +61,23 @@ function TorrentGraph (root) {
     }
   }
 
-  var width = root.offsetWidth
-  var height = (window.innerWidth >= 900) ? 400 : 250
+  function getSize () {
+    var height = (window.innerWidth >= 900) ? 400 : 250
+    var width = root.offsetWidth
+
+    if (size) {
+      if (typeof size.width === 'number') width = size.width
+      if (typeof size.width === 'function') width = size.width()
+      if (typeof size.height === 'number') height = size.height
+      if (typeof size.height === 'function') height = size.height()
+      if (size.height === 'auto') height = root.offsetHeight
+    }
+
+    return {
+      width: width,
+      height: height
+    }
+  }
 
   var focus
 
@@ -72,12 +92,13 @@ function TorrentGraph (root) {
     target.parents.push(link.source)
   })
 
+  var _size = getSize()
   var svg = d3.select(root).append('svg')
-        .attr('width', width)
-        .attr('height', height)
+        .attr('width', _size.width)
+        .attr('height', _size.height)
 
   var force = d3.layout.force()
-        .size([width, height])
+        .size([_size.width, _size.height])
         .nodes(model.nodes)
         .links(model.links)
         .on('tick', function () {
@@ -239,16 +260,15 @@ function TorrentGraph (root) {
   }
 
   function refresh (e) {
-    width = root.offsetWidth
-    height = (window.innerWidth >= 900) ? 400 : 250
+    _size = getSize()
 
     force
-            .size([width, height])
+            .size([_size.width, _size.height])
             .resume()
 
     svg
-            .attr('width', root.offsetWidth)
-            .attr('height', height)
+            .attr('width', _size.width)
+            .attr('height', _size.width)
   }
 
   function childNodes (d) {