I wrote an simple article about 'reusable' way of D3.js as a part of Advent Calendar called "Data Visualization Advent Calendar 2014." This code is a example of an implementation of a toggle navigation.
Data Visualization Advent Calendar 2014の記事として、D3.jsのreusableについてかんたんに紹介記事を書きました。これはreusableなコードの例として、トグルナビゲーションを実装してみました。
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>reusable Toggle Navigation</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js" charset="utf-8"></script>
<script src="toggleNavigation.js" charset="utf-8"></script>
<style>
#navigation {
width: 960px;
height: 50px;
margin: 0 auto;
padding-top: 225px;
}
</style>
</head>
<body>
<div id="navigation"></div>
<script>
var toggleNav = d3.n1n9.toggleNavigation().indexNum(0).on("customClick", customClicked);
queue()
.defer(d3.tsv, "navData.tsv")
.await(loadReady);
function loadReady(_error, _nav) {
d3.select("#navigation").datum(_nav).call(toggleNav);
};
function customClicked() {
console.log( "indexNum: " + toggleNav.indexNum() );
}
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/queue.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js