mirror
/
kiln_controller
kopia lustrzana https://github.com/jamesgao/kiln_controller
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Working zoom behavior for the tempgraph

master
James Gao 2014-10-18 22:40:58 -07:00
rodzic 84145bb3cd
commit 0459d84a00
2 zmienionych plików z 60 dodań i 26 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

78
kiln/temp_graph.js
Wyświetl plik

@ -14,26 +14,36 @@ var tempgraph = (function(module) {
else else
this.obj = document.createElementNS("http://www.w3.org/2000/svg", "svg"); this.obj = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.width = options.width ? options.width : $(this.obj).width() - options.margin.left - options.margin.right;
this.height = options.height ? options.height : $(this.obj).height() - options.margin.top - options.margin.bottom;
this.margin = options.margin; this.margin = options.margin;
this.width = options.width ? options.width : $(this.obj).width() - this.margin.left - this.margin.right;
this.height = options.height ? options.height : $(this.obj).height() - this.margin.top - options.margin.bottom;
this.svg = d3.select(this.obj).append("g").attr("transform", "translate("+options.margin.left+","+options.margin.top+")"); this.svg = d3.select(this.obj);
this.svg.append("defs").append("rect")
.attr("class", "pane")
.attr("width", this.width)
.attr("height", this.height);
this.axes = this.svg.append("g")
.attr("class", "axes")
.attr("transform", "translate("+this.margin.left+","+this.margin.top+")")
.attr("clip-path", "url(#pane)");
this.x = d3.time.scale().range([0, this.width]); this.x = d3.time.scale().range([0, this.width]);
this.y = d3.scale.linear().range([this.height, 0]); this.y = d3.scale.linear().range([this.height, 0]);
this.zoom = d3.behavior.zoom().on("zoom", this.draw.bind(this));
if (options.show_axes === undefined || options.show_axes) { if (options.show_axes === undefined || options.show_axes) {
this.x_axis = d3.svg.axis().scale(this.x).orient("bottom"); this.x_axis = d3.svg.axis().scale(this.x).orient("bottom");
this.y_axis = d3.svg.axis().scale(this.y).orient("left"); this.y_axis = d3.svg.axis().scale(this.y).orient("left");
//setup axies labels and ticks //setup axies labels and ticks
this.svg.append("g") this.axes.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + this.height + ")") .attr("transform", "translate(0," + this.height + ")")
.call(this.x_axis); .call(this.x_axis);
this.svg.append("g") this.axes.append("g")
.attr("class", "y axis") .attr("class", "y axis")
.call(this.y_axis) .call(this.y_axis)
.append("text") .append("text")
@ -41,32 +51,36 @@ var tempgraph = (function(module) {
.attr("y", 6) .attr("y", 6)
.attr("dy", ".71em") .attr("dy", ".71em")
.style("text-anchor", "end") .style("text-anchor", "end")
.text("Temperature (°C)"); .text("Temperature (°F)");
} }
window.onresize = this.resize.bind(this);
this.lines = []; this.lines = [];
}; };
module.Graph.prototype.plot = function(data, marker) { module.Graph.prototype.plot = function(data, marker) {
var line = d3.svg.line() var line = d3.svg.line()
.x(function(d) { return this.x(d.time); }.bind(this)) .x(function(d) { return this.x(d.x); }.bind(this))
.y(function(d) { return this.y(d.temp); }.bind(this)); .y(function(d) { return this.y(d.y); }.bind(this));
this.svg.append("path") this.axes.append("path")
.datum(data) .datum(data)
.attr("class", "line") .attr("class", "line")
.attr("d", line); .attr("d", line);
if (marker !== undefined && marker) { if (marker !== undefined && marker) {
var marker = this.svg.selectAll(".dot").data(data) var marker = this.axes.append("g")
.selectAll(".dot").data(data)
.enter().append("circle") .enter().append("circle")
.attr("class", "dot") .attr("class", "dot")
.attr("r", 5) .attr("r", 5)
.attr("cx", function(d) { return this.x(d.time); }.bind(this)) .attr("cx", function(d) { return this.x(d.x); }.bind(this))
.attr("cy", function(d) { return this.y(d.temp); }.bind(this)); .attr("cy", function(d) { return this.y(d.y); }.bind(this));
} }
this.lines.push({line:line, data:data, marker:marker}); this.lines.push({line:line, data:data, marker:marker});
this.x.domain(d3.extent(data, function(d) { return d.time; })); this.x.domain(d3.extent(data, function(d) { return d.x; }));
this.y.domain(d3.extent(data, function(d) { return d.temp; })); this.y.domain(d3.extent(data, function(d) { return d.y; }));
this.zoom.x(this.x);
this.svg.call(this.zoom);
this.draw(); this.draw();
return line; return line;
} }
@ -80,23 +94,37 @@ var tempgraph = (function(module) {
marker = this.lines[i].marker; marker = this.lines[i].marker;
if (marker !== undefined) { if (marker !== undefined) {
this.svg.selectAll(".dot").data(data) this.svg.selectAll(".dot").data(data)
.attr("cx", function(d) { return this.x(d.time)}.bind(this)) .attr("cx", function(d) { return this.x(d.x)}.bind(this))
.attr("cy", function(d) { return this.y(d.temp)}.bind(this)); .attr("cy", function(d) { return this.y(d.y)}.bind(this));
} }
this.svg.select("path.line").attr("d", line); this.svg.select("path.line").attr("d", line);
} }
console.log("draw");
} }
module.Graph.prototype.resize = function() { module.Graph.prototype.resize = function() {
var margin = this.margin;
var width = $(this.obj).width() - margin.left - margin.right;
var height = $(this.obj).height() - margin.top - margin.bottom;
this.svg this.svg
.attr("width", width + margin.left + margin.right) .attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom) .attr("height", height + margin.top + margin.bottom)
this.svg.select("rect.pane")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
this.x.range([0, width]);
this.y.range([height, 0]);
this.width = width;
this.height = height;
this.draw(); this.draw();
console.log("resized");
} }
module.Graph.prototype.update = function(line, data) { module.Graph.prototype.update = function(line, data) {
for (var i = 0; i < this.lines.length; i++) { for (var i = 0; i < this.lines.length; i++) {
if (this.lines[i].line === line) { if (this.lines[i].line === line) {
this.svg.select("path.line").datum(data).attr("d", line); this.axes.select("path.line").datum(data).attr("d", line);
} }
} }
this.draw(); this.draw();
@ -110,25 +138,25 @@ var tempgraph = (function(module) {
var data = d3.tsv("data.txt", function(error, data) { var data = d3.tsv("data.txt", function(error, data) {
data.forEach(function(d) { data.forEach(function(d) {
d.time = new Date(d.time*1000.); d.x = new Date(d.time*1000.);
d.temp = +d.temp; d.y = +d.temp*9/5+32;
}); });
graph = new tempgraph.Graph() graph = new tempgraph.Graph()
line = graph.plot(data.slice(0, 400), false); line = graph.plot(data, false);
}); });
function update() { function update() {
d3.tsv("data2.txt", function(error, data) { d3.tsv("data2.txt", function(error, data) {
data.forEach(function(d) { data.forEach(function(d) {
d.time = new Date(d.time*1000.); d.x = new Date(d.time*1000.);
d.temp = +d.temp; d.y = +d.temp;
}); });
var lim = d3.extent(data, function(d){return d.time;}); var lim = d3.extent(data, function(d){return d.x;});
graph.xlim(lim[0], lim[1]); graph.xlim(lim[0], lim[1]);
graph.update(line, data); graph.update(line, data);
console.log("done!"); console.log("done!");
}) })
} }

8
kiln/template.html
Wyświetl plik

@ -42,6 +42,12 @@
height:500px; height:500px;
} }
rect.pane {
cursor: move;
fill: none;
pointer-events: all;
}
</style> </style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@ -130,4 +136,4 @@
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="temp_graph.js"></script> <script type="text/javascript" src="temp_graph.js"></script>
</body> </body>
</html> </html>