❇️ Implement node events with d3 and not Event Emitter

README.md

@@ -38,7 +38,9 @@ The big part of the API is configuring the tree before passing data to it :
 Treeviz.create(config);
 ```
 
-| Command            | Type                               | Default              | Definition                                                                                                                                                                         |
+The table below lists all the avalaible key that the config object can have
+
+| Key                | Type                               | Default              | Definition                                                                                                                                                                         |
 | ------------------ | ---------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `htmlID`           | string (Required)                  |                      | The HTML id tag on the page where the tree should be drawn. It must have a width and an height specified                                                                           |
 | `nodeField`        | string                             | "id"                 | The unique identifier field in the dataset representing the node                                                                                                                   |
@@ -51,14 +53,13 @@ Treeviz.create(config);
 | `linkColor`        | function                           | (nodeData) => "grey" | Color of the link                                                                                                                                                                  |
 | `linkWidth`        | function                           | (nodeData) => 10     | Width of the link                                                                                                                                                                  |
 | `linkShape`        | "quadraticBeziers" \| "orthogonal" | "quadraticBeziers"   | Shape of the link                                                                                                                                                                  |
-| `nodeTemplate`     | function                      |                      | HTML template for every node                                                                                                                                                       |
+| `nodeTemplate`     | function                           |                      | HTML template for every node                                                                                                                                                       |
 | `horizontalLayout` | boolean                            | true                 | Direction of the tree. If true, the tree expands from left to right. If false, it goes from top to bottom                                                                          |
 
-#### Treeviz.on (Event)
-
-If you click on a node, the event will be triggered, and the node data will be passed as an argument to the callback function.
+| `onNodeClick` | function | | Function handling the event when someone click on it |
+| `onNodeMouseEnter` | function | | Function handling the event when someone hover a node |
 
-`Treeviz.on("nodeClick", function(d) { // do something });`
+| `onNodeMouseLeave` | function | | Function handling the event when the mouse pointer leaves a node |
 
 ## Example
 
@@ -79,6 +80,7 @@ var myTree = Treeviz.create({
   nodeField: "id",
   flatData: true,
   relationnalField: "father",
+  onNodeClick: nodeData => console.log("you clicked me!"),
 });
 
 myTree.refresh(flat_data_example);

demo/demo.html

@@ -53,7 +53,8 @@
         horizontalLayout:true,
         nodeTemplate: (nodeData) => "<div style='height:100px; width:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;'><div><strong>"+nodeData.text_1+"</strong></div><div>is</div><div><i>"+nodeData.text_2+"</i></div></div>",
         linkWidth : (nodeData)=> nodeData.id*5,
-        linkColor : (nodeData) => "#B0BEC5" 
+        linkColor : (nodeData) => "#B0BEC5" ,
+        onNodeClick : (nodeData) => console.log(nodeData)
     });
     myTree.refresh(data_1);
     var toggle=true;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "treeviz",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Library which aims to represent trees for data visualization",
   "keywords": [
     "d3",
@@ -24,21 +24,20 @@
     "lint": "tslint src/*.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
     "@babel/preset-typescript": "^7.1.0",
-    "@types/component-emitter": "^1.2.7",
-    "@types/d3": "^5.0.0",
+    "@types/d3": "^5.0.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.4",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^23.6.0",
     "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.15.0",
-    "typescript": "^3.1.1",
-    "webpack": "^4.20.2",
+    "tslint-config-prettier": "^1.17.0",
+    "typescript": "^3.2.2",
+    "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.9"
+    "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
     "d3": "^5.7.0"

src/index.js

@@ -1,5 +1,4 @@
 import * as d3 from "d3";
-import Emitter from "component-emitter";
 import { drawLinks } from "./draw-links.ts";
 import { initiliazeSVG } from "./initializeSVG.ts";
 import { prepareData } from "./prepare-data.ts";
@@ -23,6 +22,9 @@ export function create(userSettings) {
     horizontalLayout: true,
     zoomBehavior: false,
     duration: 400,
+    onNodeClick: () => null,
+    onNodeMouseEnter: () => null,
+    onNodeMouseLeave: () => null,
   };
   const settings = { ...defaultSettings, ...userSettings };
   var oldPosition = [];
@@ -71,16 +73,16 @@ export function create(userSettings) {
       .attr("height", settings.nodeHeight)
       .style("fill", ({ data }) => settings.nodeColor(data))
       .style("cursor", "pointer")
-      .on("click", d => {
-        obj.emit("nodeClick", d);
-      });
+      .on("click", settings.onNodeClick)
+      .on("mouseenter", settings.onNodeMouseEnter)
+      .on("mouseleave", settings.onNodeMouseLeave);
 
     nodeEnter
       .append("foreignObject")
       .attr("width", settings.nodeWidth)
       .attr("height", settings.nodeHeight)
       .style("pointer-events", "none")
-      .html(({data})=> settings.nodeTemplate(data));// settings.nodeTemplate(data));
+      .html(({ data }) => settings.nodeTemplate(data)); // settings.nodeTemplate(data));
 
     // UPDATE
     var nodeUpdate = nodeEnter.merge(node);
@@ -166,7 +168,6 @@ export function create(userSettings) {
   }
 
   var obj = { refresh: refresh };
-  Emitter(obj);
 
   let svg = initiliazeSVG(settings);
   return obj;

src/typings.ts

@@ -8,11 +8,14 @@ export interface ITreeConfig {
   nodeWidth: number;
   nodeHeight: number;
   nodeDepthDistance: number;
-  nodeTemplate: () => string;
-  nodeColor: () => string;
+  nodeTemplate: (node: any) => string;
+  nodeColor: (node: any) => string;
   linkShape: string;
-  linkColor: () => string;
-  linkWidth: () => string;
+  linkColor: (node: any) => string;
+  linkWidth: (node: any) => string;
+  onNodeClick: (node: any) => null;
+  onNodeMouseEnter: (node: any) => null;
+  onNodeMouseLeave: (node: any) => null;
   horizontalLayout: boolean;
   zoomBehavior: boolean;
   duration: number;