feat: Add callback for node width separation #27

README.md

@@ -3,17 +3,25 @@
 
 [![npm](https://img.shields.io/npm/v/d3-dtree.svg)](https://www.npmjs.com/package/d3-dtree) [![Bower](https://img.shields.io/bower/v/d3-dtree.svg)](https://github.com/ErikGartner/dTree)
 
-## Treehouse
-There exists a playground/open repository for dTree graphs called [Treehouse](https://treehouse.gartner.io). There anyone can host a dTree graph without having to create a website or interact directly with the library. It uses Github gists to store the data and displays it in a nice format. Checkout the **demo** graph for dTree: https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7
+## Demo
+There exists a playground/open repository for dTree graphs called [Treehouse](https://treehouse.gartner.io), similar to [https://bl.ocks.org/](https://bl.ocks.org/). Treehouse allows anybody to host a dTree graph without having to create a website or interact directly with the library. It uses Github gists to store the data and displays it in a nice format. Checkout the *demo* graph for dTree:
 
-The demo is also available on [JSFiddle](https://jsfiddle.net/zsd4pwr3/).
+https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7
+
+The same demo is also available on [JSFiddle](https://jsfiddle.net/zsd4pwr3/).
 
 ## Installation
 There are several ways to use dTree. One way is to simply include the compiled file ```dTree.js``` that then exposes a ```dTree``` variable. dTree is available on both NPM and Bower as *d3-dtree*.
 
-Lastly dTree is also available through the RawGit CDN:
+```bash
+npm install d3-dtree
+bower install d3-dtree
+yarn add d3-dtree
+```
+
+Lastly dTree is also available through several CDNs such as [jsDelivr](https://www.jsdelivr.com/package/npm/d3-dtree):
 ```
-https://cdn.rawgit.com/ErikGartner/dTree/2.0.2/dist/dTree.min.js
+https://cdn.jsdelivr.net/npm/d3-dtree@2.0.2/dist/dTree.min.js
 ```
 
 ## Requirements
@@ -97,7 +105,7 @@ The options object has the following default values:
 ```
 
 ### Callbacks
-Below follows a short descriptions of the available callback functions that may be passed to dTree. See [dtree.js](https://github.com/ErikGartner/dTree/blob/master/src/dtree.js) for the default implementations.
+Below follows a short descriptions of the available callback functions that may be passed to dTree. See [dtree.js](https://github.com/ErikGartner/dTree/blob/master/src/dtree.js) for the *default implementations*.
 
 #### nodeClick
 ```javascript
@@ -111,6 +119,12 @@ function(name, x, y, height, width, extra, id, nodeClass, textClass, textRendere
 ```
 The nodeRenderer is called once for each node and is expected to return a string containing the node. By default the node is rendered using a div containing the text returned from the default textRendeder. See the JSFiddle above for an example on how to set the callback.
 
+#### nodeHeightSeperation
+```javascript
+function(nodeWidth, nodeMaxHeight)
+```
+The nodeHeightSeperation is called during intial layout calculation. It shall return one number representing the distance between the levels in the graph.
+
 #### nodeSize
 ```javascript
 function(nodes, width, textRenderer)
@@ -148,4 +162,4 @@ A good place to start is to make a pull request to solve an open issue. Feel fre
 ## License
 The MIT License (MIT)
 
-Copyright (c) 2015-2018 Erik Gärtner
+Copyright (c) 2015-2019 Erik Gärtner

gulpfile.js

@@ -140,7 +140,7 @@ gulp.task('changelog', function () {
 
 gulp.task('update-cdn', function() {
   gulp.src(['./README.md'])
-    .pipe($.replace(/dTree\/(\d\.\d\.\d)\/dist\/dTree.min.js/g, 'dTree/'+
+    .pipe($.replace(/dTree@(\d\.\d\.\d)\/dist\/dTree.min.js/g, 'dTree@'+
       getPackageJsonVersion() + '/dist/dTree.min.js'))
     .pipe(gulp.dest('./'));
 });

src/builder.js

@@ -44,7 +44,8 @@ class TreeBuilder {
 
     // Compute the layout.
     this.tree = d3.tree()
-      .nodeSize([nodeSize[0] * 2, nodeSize[1] * 2.5]);
+      .nodeSize([nodeSize[0] * 2,
+                 opts.callbacks.nodeHeightSeperation(nodeSize[0], nodeSize[1])]);
 
     this.tree.separation(function separation(a, b) {
       if (a.data.hidden || b.data.hidden) {
@@ -247,6 +248,10 @@ class TreeBuilder {
     return fun(linedata);
   }
 
+  static _nodeHeightSeperation(nodeWidth, nodeMaxHeight) {
+    return nodeMaxHeight + 25;
+  }
+
   static _nodeSize(nodes, width, textRenderer) {
     let maxWidth = 0;
     let maxHeight = 0;

src/dtree.js

@@ -13,6 +13,9 @@ const dTree = {
       height: 600,
       callbacks: {
         nodeClick: function(name, extra, id) {},
+        nodeHeightSeperation: function(nodeWidth, nodeMaxHeight) {
+          return TreeBuilder._nodeHeightSeperation(nodeWidth, nodeMaxHeight);
+        },
         nodeRenderer: function(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
           return TreeBuilder._nodeRenderer(name, x, y, height, width, extra,
             id,nodeClass, textClass, textRenderer);