chor(d3kit-timeline): fix defect with canvas size when there are elements below visible part

examples/src/index.ejs

@@ -80,6 +80,9 @@
   <h2>With custom text style</h2>
   <div class="timeline" id="timeline6"></div>
 
+  <h2>With multiple nodes int he end</h2>
+  <div class="timeline" id="timeline7"></div>
+
   <footer>
     Created by Krist Wongsuphasawat / <a href="https://twitter.com/kristw">@kristw</a>
     <br>
@@ -91,4 +94,4 @@
 
 </body>
 
-</html>
+</html>

examples/src/main.js

@@ -11,7 +11,7 @@ const data = [
   {time: new Date(1999, 4,19), episode: 1, name: 'The Phantom Menace'},
   {time: new Date(2002, 4,16), episode: 2, name: 'Attack of the Clones'},
   {time: new Date(2005, 4,19), episode: 3, name: 'Revenge of the Sith'},
-  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},
+  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'}
 ];
 
 const data2 = [
@@ -22,7 +22,22 @@ const data2 = [
   {time: 29, name: 'Khedira', team: 'GER'},
   {time: 69, name: 'SchÜrrle', team: 'GER'},
   {time: 79, name: 'SchÜrrle', team: 'GER'},
-  {time: 90, name: 'Oscar', team: 'BRA'},
+  {time: 90, name: 'Oscar', team: 'BRA'}
+];
+
+const data3 = [
+  {time: new Date(1977, 4,25), episode: 4, name: 'A New Hope'},
+  {time: new Date(1980, 4,17), episode: 5, name: 'The Empire Strikes Back'},
+  {time: new Date(1984, 4,25), episode: 6, name: 'Return of the Jedi'},
+  {time: new Date(1999, 4,19), episode: 1, name: 'The Phantom Menace'},
+  {time: new Date(2002, 4,16), episode: 2, name: 'Attack of the Clones'},
+  {time: new Date(2005, 4,19), episode: 3, name: 'Revenge of the Sith'},
+  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},
+  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},
+  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},
+  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},
+  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},
+  {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'}
 ];
 
 const colorScale = scaleOrdinal(schemeCategory10);
@@ -186,3 +201,20 @@ chart6
   .data(data2)
   .visualize()
   .resizeToFit();
+
+const chart7 = new d3KitTimeline('#timeline7', {
+    direction: 'right',
+    initialWidth: 400,
+    initialHeight: 250,
+    textFn: d => [d.time.getFullYear(), d.name].join(' - '),
+  }).data(data3).visualize();
+
+
+//see how invoking without timeout does not solve defect
+chart7.resizeToFit();
+
+//now the magic will happen, ideally implementation should be bound
+//to redering done event.
+setTimeout(function(){
+  chart7.resizeToFit();
+}, 1000);

src/main.js

@@ -63,33 +63,27 @@ class Timeline extends SvgChart {
     this.visualize = this.visualize.bind(this);
     this.on('data', this.visualize);
     this.on('options', this.visualize);
-    this.on('resize', this.visualize);
   }
 
+  /**
+   * Relying on inner height and width of *rendered* chart, assign width
+   * and height values to svg element and it's container.
+   *
+   * *NOTE* this method is best to be invoked after rendering happened,
+   * ie, wrapped in timeout function
+   *
+   **/
   resizeToFit(){
-    const options = this.options();
-    let maxVal;
-    const nodes = this.force.nodes();
+    //bbox of the inner group representing chart
+    var bbox = this.rootG._groups[0][0].getBBox();
 
-    switch(options.direction){
-      case 'up':
-        maxVal = max(nodes, d => Math.abs(d.y)) || 0;
-        this.height(maxVal + options.margin.top + options.margin.bottom);
-        break;
-      case 'down':
-        maxVal = max(nodes, d => Math.abs(d.y + d.dy)) || 0;
-        this.height(maxVal + options.margin.top + options.margin.bottom);
-        break;
-      case 'left':
-        maxVal = max(nodes, d => Math.abs(d.x)) || 0;
-        this.width(maxVal + options.margin.left + options.margin.right);
-        break;
-      case 'right':
-        maxVal = max(nodes, d => Math.abs(d.x + d.dx)) || 0;
-        this.width(maxVal + options.margin.left + options.margin.right);
-        break;
-    }
+    var height = Math.abs(bbox.height) + Math.abs(bbox.y)
+      + this.options().margin.top + this.options().margin.bottom;
+    var width = Math.abs(bbox.width) + Math.abs(bbox.x)
+      + this.options().margin.left + this.options().margin.right;
 
+    this.height(height);
+    this.width(width);
     return this;
   }