javascript - D3 axes: aligning dates (x), displaying time (y) -
i have data array of (date, start, stop) tuples, start , stop minutes in day [0, 1440], 1 a.m. represented 60. plot rectangles, each rectangle horizontally aligned date , height start , stop times. i've got, close has couple errors (which errors question):
i want rectangles wide date column, that's not quite i'm seeing. in particular, call
x_scale.rangeband()giving me wider column. (note horizontal overlap.)- .5 * x_scale.rangeband())meant center rectangles.i'd indicate times rather minutes on y-axis, commented calls
ticks(),tickvalues()not @ all.
pointers appreciated.
this code generates this:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>d3 page template</title> <script type="text/javascript" src="d3.js"></script> <style> .d3-canvas { background-color: #f1eeff; } .icongray { fill: #5b5852; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispedges; } </style> </head> <body> <script type="text/javascript"> var data = [{"date": new date("2015-01-01"), "start": 0, "end": 60}, {"date": new date("2015-01-02"), "start": 720, "end": 780}, {"date": new date("2015-01-03"), "start": 1300, "end": 1440}] var do_the_plot = function(width, height) { margin = {"left": 45, "right": 25, "top": 25, "bottom": 25}; image_width = width - margin.left - margin.right; image_height = height - margin.top - margin.bottom; svg = setup_svg(width, height); draw_it(svg); } log_int = function(label, the_int) { console.log(label, the_int); return the_int; } minutes_in_day = 1440; // set svg element us. return it. setup_svg = function(width, height) { num_days = 3 canvas = d3.select("body") .append("svg") .attr({"width": width, "height": height, "class": "d3-canvas", }); inside = canvas.append("g") .attr({"transform": "translate(" + margin.left + "," + margin.top + ")" }) return inside; } // draw rectangles representing reading sessions. draw_it = function(svg, reading_sessions) { // assume data list of {day, start, stop}, day int // (zero-based, days since start), start , stop minutes (int). x_scale = d3.scale.ordinal() //.domain([0, num_days]) .domain([new date("2015-01-01"), new date("2015-01-03")]) // use data. .rangeroundbands([0, image_width]); y_scale = d3.scale.linear() .domain([0, minutes_in_day]) .range([image_height, 0]); h_scale = d3.scale.linear() .domain([0, minutes_in_day]) .range([0, image_height]); console.log("about rect"); svg.selectall("rect") .data(data) .enter() .append("rect") .attr({ "width": function(d) { return log_int("w", x_scale.rangeband()); }, "height": function(d) { return log_int("h", h_scale(d.end - d.start)); }, "x": function(d) { return log_int("x", x_scale(d.date) - .5 * x_scale.rangeband()); }, "y": function(d) { return log_int("y", y_scale(d.end)); }, "class": "icongray" }); console.log("got rects"); var x_axis = d3.svg.axis() .scale(x_scale) .orient("bottom") .tickformat(d3.time.format("%d-%m")); svg.append("g") .attr({"class": "axis", "transform": "translate(0, " + image_height + ")", }) .call(x_axis); var y_axis = d3.svg.axis() .scale(y_scale) //.ticks([0, 180, 360, 540, 720, 900, 1080, 1260, 1440]) //.tickvalues(["midnight", "3:00", "6:00", "9:00", "noon", "15:00", "18:00", "21:00", "midnight"]) .orient("left"); svg.append("g") .attr({"class": "axis"}) .call(y_axis); } do_the_plot(300, 300); </script> </body> </html>
- i want rectangles wide date column ....the problem because had given domain if range. domain have values. code on x axis:
.domain([new date("2015-01-01"), new date("2015-01-03")]) // should have been this.. give array of dates in data .domain(data.map(function (d) {return d.date;}))- i'd indicate times rather minutes on y-axis .... tick values not tick format help. on y axis do:
//y tick values var y_values = [0, 180, 360, 540, 720, 900, 1080, 1260, 1440] //y tick display corresponding values var y_display = ["midnight", "3:00", "6:00", "9:00", "noon", "15:00", "18:00", "21:00", "midnight"] .tickvalues(y_values) .tickformat(function (d) { var index = y_values.indexof(d) return y_display[index]; })full corrected code here: http://jsfiddle.net/cyril123/q4zy96zu/1/
Comments
Post a Comment