example_D3.html

<div>
	<script src="node_modules/d3/d3.min.js"></script>
<style>
<style>

svg {
	  font: 10px sans-serif;
}

rect {
	  fill: #ddd;
}

.axis path,
.axis line {
	  fill: none;
		    stroke: #fff;
}

svg {
	border : 1px solid red;
}

</style>
</style>
	<h1 id="title">D3</h1>

	<div class="form-group">
		<label for="input_fname">rrd file</label>
		<select id="file" onchange="input_update()">
		</select>
	</div>
	<button onclick="input_update()" class="btn btn-default">Update</button>
	<hr />

	<svg id="example" />

	<script type="text/javascript">

//<![CDATA[

function update_info(bf) {
	var rrd_Graph = new RRDGraph();
	rrd_Graph.addRrdFile(new RRDFile(bf));
	datas(rrd_Graph.getFlotData()[0].data);
}

function datas(data) {
	var margin = {top: 40, right: 40, bottom: 40, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.time.scale()
		.domain(d3.extent(data, function(d) { return d[0]; }))
		.range([0, width]);

	var y = d3.scale.linear()
		.domain(d3.extent(data, function(d) { return d[1]; }))
		.range([height, 0]);

	var xAxis = d3.svg.axis()
		.scale(x)
		.orient("bottom")
		.tickSize(-height);

	var yAxis = d3.svg.axis()
		.scale(y)
		.orient("left")
		.ticks(5)
		.tickSize(-width);

	// ZOOM

	function zoomed() {
		svg.select(".x.axis").call(xAxis);
		svg.select(".y.axis").call(yAxis);
		svg.select("path")
			.attr("class", "area")
			.attr("d", line);
	}
	var zoom = d3.behavior.zoom()
		.x(x)
		.y(y)
		.scaleExtent([1, 10])
		.on("zoom", zoomed);

	// remove old graph
	d3.select("svg").remove();

	var svg = d3.select("body")
		.append("svg")
		.datum(data)
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.call(zoom);

	var line = d3.svg.area()
		.defined(function(d) { return !isNaN(d[1]); })
		.x(function(d) { return x(d[0]); })
		.y0(height)
		.y1(function(d) { return y(d[1]); });

	svg.append("path")
		.attr("class", "area")
		.attr("d", line);

	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis);


	svg.append("g")
		.attr("class", "y axis")
		.call(yAxis);



}

function input_update() {
	new BinaryFile("rrd/"+$('#file').val()+".rrd", update_info);
}


fillFileOptions($('#file'));


//]]>

	</script>
</div>