(function(){ function d3_plot(container) { this.opt = { w:550, h:200, margin:30 }; this.element = container.append("svg:g") .classed("d3.plot_plot",true) .attr("width", this.opt.w) .attr("height", this.opt.h); this.element.append("svg:rect") .attr("width", this.opt.w) .attr("height", this.opt.h) .style("fill", "white"); this.element.append("svg:text") .classed("d3-plot_wait", true) .attr("x", this.opt.w/2) .attr("y", this.opt.h/2) .attr("text-anchor", "center") .text("Bitte warten"); }; d3_plot.prototype = { draw: function(data) { var x_min = d3.min(data, function(d){return d[0];}), x_max = d3.max(data, function(d){return d[0];}), y_min = d3.min(data, function(d){return d[1];}), y_max = d3.max(data, function(d){return d[1];}); var x = d3.time.scale() .domain([x_min, x_max]) .range([0+this.opt.margin, this.opt.w-this.opt.margin]); var y = d3.scale.linear() .domain([y_min, y_max]) .range([0+this.opt.margin, this.opt.h-(this.opt.margin/2)]); var g = this.element.append("svg:g") .attr("transform", "translate(0, "+this.opt.h+")"); var line = d3.svg.line() .x(function(d,i){ return x(d[0]); }) .y(function(d) {return -1*y(d[1]);}); g.append("svg:path") .attr("d", line(data)); // Axes X-Line g.append("svg:line") .attr("x1", 0) .attr("y1", -1*y(y_min)) .attr("x2", x(x_max)) .attr("y2", -1 * y(y_min)); // Tick Labels var tick_format = d3.time.format("%d.%m"); g.selectAll(".xlabel") .data(x.ticks(5)).enter() .append("svg:text") .text(function(d){return tick_format(d);}) .attr("x", function(d) {return x(d);}) .attr("y", -5) .attr("text-anchor", "center"); g.selectAll(".ylabel") .data(y.ticks(5)).enter() .append("svg:text") .text(String) .attr("x", 0) .attr("y", function(d) {return -1*y(d);}) .attr("text-anchor", "right"); // X-Lines g.selectAll(".xlines") .data(x.ticks(5)).enter() .append("svg:line") .style("fill", "none") .style("stroke", "#000000") .style("stroke-width", 0.5) .style("stroke-dasharray", "6,1") .attr("x1", function(d){return x(d);}) .attr("y1", -1*y(y_min)+(this.opt.margin/3)) .attr("x2", function(d){return x(d);}) .attr("y2", -1*y(y_max)); // this.element.select(".d3-plot_wait").style("display","none"); } }; d3.plot = function(container) { return new d3_plot(container); }; })();