force chart v3

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>


<script>

/**
    * do the force vizualization
    * @param {string} divName name of the div to hold the tree
    * @param {object} inData the source data
    */
   function doTheTreeViz(divName, inData) {
       
			// tweak the options
			var options = $.extend({
				stackHeight : 12,
				radius : 5,
				fontSize : 12,
				labelFontSize : 8,
				nodeLabel : null,
				markerWidth : 0,
				markerHeight : 0,
				gap : 1.5,
				nodeResize : "",
				linkDistance : 80,
				charge : -520,
				styleColumn : null,
				styles : null,
				linkName : null,
				width : $(divName).outerWidth(),
				height : $(divName).outerHeight()
			}, inData.d3.options);
		
			// set up the parameters
			options.gap = options.gap * options.radius;
			var width = options.width;
			var height = options.height;
			var data = inData.d3.data;
			var nodes = data.nodes;
			var links = data.links;
			//var color = d3.scale.category20();
			var color = d3.scale.ordinal().range(["#1398ff", "#bdbdbd", "#ffc332", "#daa520", "#00bfff", "#dc143c", "#87cefa", "#90ee90", "#add8e6", "#d3d3d3", "#cf1256", "#12cf5e"]);

			var colorStatus = d3.scale.ordinal().range(["#00ff00", "#fff000", "#f40336"]);
			
			var force = d3.layout.force().nodes(nodes).links(links).size([width, height]).linkDistance(options.linkDistance).charge(options.charge).on("tick", tick).start();

			var svg = d3.select(divName).append("svg:svg").attr("width", width).attr("height", height);

			// get list of unique values in stylecolumn
			linkStyles = [];
		
			if (options.styleColumn) {
				var x;
				for (var i = 0; i < links.length; i++) {
					if (linkStyles.indexOf( x = links[i][options.styleColumn].toLowerCase()) == -1){
						linkStyles.push(x);
					}
				}
			} else{
				linkStyles[0] = "defaultMarker";
			}
			// do we need a marker?

			if (options.markerWidth)...