just another inlet to tributary

inlet.js

var pathJson = {
            "name": "Sample data",
            "children": [{
                "name": "Title 1",
                "size": 1,
                "children": [{
                    "name": "Title 1-1",
                    "size": 1,
                    "children": [{
                        "name": "1-1-1",
                        "size": 1
                    }, {
                        "name": "1-1-2",
                        "size": 1
                    }, {
                        "name": "1-1-3",
                        "size": 1
                    }, {
                        "name": "1-1-4",
                        "size": 1
                    }]
                }, {
                    "name": "Title 1-2",
                    "size": 1,
                    "children": [{
                        "name": "1-2-1",
                        "size": 1
                    }, {
                        "name": "1-2-2",
                        "size": 1
                    }, {
                        "name": "1-2-3",
                        "size": 1
                    }]
                }, {
                    "name": "Title 1-3",
                    "size": 1,
                    "children": [{
                        "name": "1-3-1",
                        "size": 1
                    }]
                }]
            }]
        }

        var w = 1280 - 80,
            h = 800 - 180,
            x = d3.scale.linear().range([0, w]),
            y = d3.scale.linear().range([0, h]),
			pad = 30,
            color = d3.scale.category10(),
            root,
            node;

        var treemap = d3.layout.treemap()
						.round(false)
						.size([w, h])
						.sticky(false)
						.padding([pad, 0, 0, 0])
						.value(function (d) {return d.size;});

        var svg = d3.select("svg")
            		.append("svg:svg")
					.attr("width", w)
					.attr("height", h)
					.append("svg:g")
					.attr("transform", "translate(.5,.5)");

        node = root = pathJson;

        var nodes = treemap.nodes(root);
        var children = nodes.filter(function (d) {return !d.children;});
        var parents = nodes.filter(function (d) {return d.children;});

        var childCell = svg.selectAll("g")
						   .data(children)
						   .enter().append("svg:g")
						   .attr("class", "childCell")
						   .attr("transform", function (d) {
									return "translate(" + d.x + "," + d.y + ")";})
						   .on("click", function (d) {
									return zoom(node == d.parent ? root : d.parent);});

        childCell.append("svg:rect")
			     .attr("width", function (d) {return d.dx - 1;})
				 .attr("height", function (d) {return d.dy - 1;})
				 .style("fill", function (d) {return color(d.parent.name);});

        childCell.append("svg:text")
				 .attr("x", function (d) {return d.dx / 2;})
				 .attr("y", function (d) {return d.dy / 2;})
				 .attr("dy", ".35em")
				 .attr("text-anchor", "middle")
				 .text(function (d) {return d.name;})
				 .style("opacity", function (d) {
						d.w = this.getComputedTextLength();
						return d.dx > d.w ? 1 : 0;
					});	

        var parentCell = svg.selectAll("g.parentCell")
							.data(parents)
							.enter().append("svg:g")
							.attr("class", "parentCell")
							.attr("transform", function (d) {
								return "translate(" + d.x + "," + d.y + ")";});

        parentCell = parentCell.filter(function (d) {return d.depth > 0;});
         
		parentCell.append("svg:rect")
				  .attr("width", function (d) {return d.dx - 1;})
				  .attr("height", pad)
				  .style("fill", "orange")
				  .style("fill-opacity", 0.5);
				  
        parentCell.append("text")
				  .text(function (d) {return d.name;})
          		  //sort of a patch
				  .attr("x", function(d) { return (d.dx-d.name.length) / 2.2; })
				  .attr("y", textHeight(root))
				  .style("font-size",20)
				  .style("font-weight", "bold");
		
		//and another one
		function textHeight(d) {
			var ky = h / d.dy;
            y.domain([d.y, d.y + d.dy]);
			return (ky * d.dy)/pad;
		}
		
//#################  ZOOM EVENTS   ###################
		
//I've tried without success to solve issues in zooming 
//The elemnts selection is probably wrong
        d3.select(window).on("click", function () {zoom(root);});
		//d3.select(childCell).on("click", function () {zoom(root);});
		d3.select(parentCell).on("click", function (d) {zoom(d);});//d3.select(this));});

        d3.select("select").on("change", function () {
            treemap.value(this.value == "size" ? size : count).nodes(root);
            zoom(node);
        });
		
        function size(d) {return d.size;}

        function count(d) {return 1;}

        function zoom(d) {
			var kx = w / d.dx,
                ky = h / d.dy;
            x.domain([d.x, d.x + d.dx]);
            y.domain([d.y, d.y + d.dy]);

            var t = svg.selectAll("g").transition().duration(d3.event.altKey ? 7500 : 750).attr("transform", function (d) {
                return "translate(" + x(d.x) + "," + y(d.y) + ")";
            });
//The attributes update is wrong as well
            t.select("rect")
			 .attr("width", function (d) {return kx * d.dx - 1;})
			 .attr("height", textHeight(d));//function (d) {return ky * d.dy - 1;});

            t.select("text")
			 .attr("x", function (d) {return kx * d.dx / 2;})
			 .attr("y", textHeight(d))//function (d) {return ky * d.dy / 2;})
			 .style("opacity", function (d) {return 1;})//kx * d.dx > d.w ? 1 : 0;});
				
            node = d;
            d3.event.stopPropagation();
        }