hw2 Meh

hw2/js/Node.js

@@ -0,0 +1,48 @@
+/** Class representing a Node in a tree. */
+class Node {
+	 /**
+	 * Creates a Node and intializes the following fields to null/empty:
+	 * parentNode, children, parentName,level,position
+	 * @param {string} nodeName - The name of the node.
+	 * @param {string} parentName - The name of the parent node.
+	 */
+	constructor(nodeName,parentName) {
+
+		//String of Node Name
+		this.name = nodeName;
+
+		//String of Parent Name
+		this.parentName = parentName;
+
+		/**
+		 * Reference to parent Node Object.
+		 */
+		this.parentNode = null;
+
+		/**
+		 * Array of Children.
+		 */
+		this.children=[];
+
+		/**
+		 * Level of the node.
+		 */
+		this.level=null;
+
+		/**
+		 * Position of the node.
+		 * Initialize to -1
+		 */
+		this.position=-1;
+	}
+
+	/**
+	 * Add child to current Node.
+	 * @param {Node} The child Node.
+	 */
+	addChild(childNode) {
+		this.children.push(childNode);
+	}
+
+
+}

hw2/js/Tree.js

@@ -0,0 +1,108 @@
+/** Class representing a Tree. */
+class Tree {
+	/**
+	 * Creates a Tree Object
+	 * parentNode, children, parentName,level,position
+	 * @param {json[]} json - array of json object with name and parent fields
+	 */
+	constructor(json) {
+        this.listOfNodes = [];
+        json.forEach(nodeInfo => {
+            let node = new Node(nodeInfo.name, nodeInfo.parent);
+            //console.log(node);
+            this.listOfNodes.push(node);
+        });
+    }
+
+	/**
+	 * Function that builds a tree from a list of nodes with parent refs
+	 */
+	buildTree(){
+	    let rootNode = this.listOfNodes.find(node => node.parentName === "root");
+	    this.listOfNodes.forEach(currentNode => {
+	        for(let i = 0; i < this.listOfNodes.length; i ++){
+	            if(this.listOfNodes[i].parentName === currentNode.name){
+	                currentNode.addChild(this.listOfNodes[i]);
+                }
+            }
+        });
+        //console.log(rootNode);
+
+        this.assignLevel(rootNode, 0);
+        this.assignPosition(rootNode, 0);
+
+
+
+    }
+
+	/**
+	 * Recursive function that assign positions to each node
+	 */
+	assignPosition(node, position) {
+		node.position = position;
+		let currentlevel = node.level;
+		let q = [];
+		node.children.forEach(x=>{
+		    q.push(x)
+        });
+		let count = 0;
+		while(q.length > 0){
+		    let current = q.shift();
+            if(currentlevel === current.level){
+                current.position = count;
+                count +=1;
+                current.children.forEach(x=> q.push(x));
+                console.log(q);
+            }
+
+            else{
+                currentlevel = current.level;
+                current.children.forEach(x=> q.push(x));
+                count = current.position+1;
+
+            }
+        }
+
+	}
+
+	/**
+	 * Recursive function that assign levels to each node
+	 */
+	assignLevel(node, level) {
+		node.level = level;
+        node.children.forEach(childNode => {
+            this.assignLevel(childNode, level+1);
+        })
+	}
+
+	/**
+	 * Function that renders the tree
+	 */
+	renderTree() {
+        d3.select("body")
+            .append("svg")
+            .attr("width", 1200)
+            .attr("height", 1200);
+        this.listOfNodes.forEach(node => {
+            let svgElement = d3.select("svg");
+            for (var i = 0; i < node.children.length; i++) {
+                svgElement.append("line")
+                    .attr("x1", (node.level + 3) * 100)
+                    .attr("y1", (node.position + 3) * 100)
+                    .attr("x2", (node.children[i].level +3) * 100)
+                    .attr("y2", (node.children[i].position+3) * 100)
+            }
+            svgElement.append("circle")
+                .attr("r", 35)
+
+                .attr("cx", (node.level+3) * 100)
+                .attr("cy", (node.position+3) * 100)
+            svgElement.append("text")
+                .attr("class", "label")
+                .attr("dx", (node.level+3) * 100)
+                .attr("dy", (node.position+3) * 100)
+                .text(node.name)
+        })
+
+    }
+}

hw2/js/script.js

@@ -0,0 +1,26 @@
+/**
+* Requests the file and executes a callback with the parsed result once
+* it is available
+* @param {path} file path
+* @param {callback} callback to execute once the result is available
+*/
+function fetchJSONFile(path, callback) {
+	var httpRequest = new XMLHttpRequest();
+	httpRequest.onreadystatechange = function() {
+		if (httpRequest.readyState === 4) {
+			if (httpRequest.status === 200) {
+				let data = JSON.parse(httpRequest.responseText);
+				if (callback) callback(data);
+			}
+		}
+	};
+	httpRequest.open('GET', path);
+	httpRequest.send();
+}
+
+//call fetchJSONFile then build and render a tree
+fetchJSONFile('data/Tree.json', function(data) {
+	let tree = new Tree(data);
+	tree.buildTree();
+	tree.renderTree();
+});