panesofglass/app.js

## app.js
(function (global, Data, Nav, f) {
    f(global, Data, Nav);
})(window, window.Data, window.Nav,
    function app(global, data, Nav) {
        "use strict";

        var nav = Nav("nav.nav");
        nav(data);

        global.setTimeout(function () {
            var newNavItem = {
                name: 'test',
                path: '/test'
            };
        /*
            data.push(newNavItem);
            data.splice(1, 0, newNavItem);
            nav(data);
        */
        }, 1000);
    }
);

## data.js
(function (global, f) {
    global.Data = f();
})(window, function () {
    return [
        {
            name: "home",
            path: "/"
        }, {
            name: "reports",
            children: [
                {
                    name: "report 1",
                    path: "/reports/1"
                }, {
                    name: "report 2",
                    path: "/reports/2"
                }
            ]
        }
    ];
});

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>D3 Experiments</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <nav class="nav"></nav>
    <script src="d3.v3.js"></script>
    <script src="nav.js"></script>
    <script src="data.js"></script>
    <script src="app.js"></script>
</body>
</html>

## nav.js
(function (global, d3, f) {
    global.Nav = f(global, d3);
})(window, window.d3,
    function app(global, d3) {
        "use strict";

        function link() {
            this.append("a")
                .attr("href", function (d) { return d.path; })
                .text(function (d) { return d.name; });
        }

        function nav(data) {
            function renderItem(d) {
                var self = d3.select(this);
                if (d.children) {
                    self.append("span")
                        .text(function (x) { return x.name; });
                    self.append("ul")
                        .classed("hide", true)
                        .call(nav(d.children));
                } else {
                    self.call(link);
                }
            }

            return function () {
                var body = this
                    .selectAll("li")
                    .data(data, function (d) { return d.name; });

                body.enter()
                    .append("li")
                    .transition()
                    .duration(500)
                    .attr("style", "background-color: yellow;")
                    .transition()
                    .duration(500)
                    .attr("style", "")
                    .each(renderItem);
                body.exit()
                    .remove();
            };
        }

        function Nav(selector) {
            var el;
            return function (data) {
                el = el || d3.select(selector).append("ul");
                el.call(nav(data));
            };
        }

        return Nav;
    }
);

## style.css
.hide {
    display: none;
}

.show {
    display: block;
}

.nav li:hover ul.active,
.nav li:hover ul.hide {
    display: block;
}
	(function (global, Data, Nav, f) {
	f(global, Data, Nav);
	})(window, window.Data, window.Nav,
	function app(global, data, Nav) {
	"use strict";

	var nav = Nav("nav.nav");
	nav(data);

	global.setTimeout(function () {
	var newNavItem = {
	name: 'test',
	path: '/test'
	};
	/*
	data.push(newNavItem);
	data.splice(1, 0, newNavItem);
	nav(data);
	*/
	}, 1000);
	}
	);
	(function (global, f) {
	global.Data = f();
	})(window, function () {
	return [
	{
	name: "home",
	path: "/"
	}, {
	name: "reports",
	children: [
	{
	name: "report 1",
	path: "/reports/1"
	}, {
	name: "report 2",
	path: "/reports/2"
	}
	]
	}
	];
	});
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>D3 Experiments</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	<nav class="nav"></nav>
	<script src="d3.v3.js"></script>
	<script src="nav.js"></script>
	<script src="data.js"></script>
	<script src="app.js"></script>
	</body>
	</html>
	.hide {
	display: none;
	}

	.show {
	display: block;
	}

	.nav li:hover ul.active,
	.nav li:hover ul.hide {
	display: block;
	}