i trying graph vertical line on time axis using d3js library. x-axis year 2015. i'd vertical line represent today (where today current day). problem i'm having figuring out how feed date coordinate in order graphed properly. here jsfiddle code.
var margin = {top: 10, right: 10, bottom: 30, left: 10}, width = 1200 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; var x = d3.time.scale() .domain([new date(2015, 0, 1), new date(2015, 11, 31)]) .range([0, width]); var y = d3.scale.linear() .domain([0,1000]) .range([height, 0]); var xaxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(d3.time.months) .ticksize(30, 0) .tickformat(d3.time.format("%b")); var xaxisminor = d3.svg.axis() .scale(x) .orient("bottom") .ticks(d3.time.months) .ticksize(-height) .tickformat(d3.time.format("%b")); var xaxisminorticks = d3.svg.axis() .scale(x) .orient("bottom") .ticks(d3.time.weeks) .ticksize(-height) .tickformat(d3.time.format("%u")); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("rect") .attr("class", "grid-background-light") .attr("width", width) .attr("height", height + margin.bottom) .attr("rx", 5) .attr("ry", 5); svg.append("rect") .attr("class", "grid-background") .attr("width", width) .attr("height", 30) .attr("transform", "translate(0," + (height) + ")"); svg.append("g") .attr("class", "minorticks") .attr("transform", "translate(0," + height + ")") .call(xaxisminorticks) .selectall(".tick") .data(x.ticks(52), function(d) { return d; }) .exit() .classed("minorticks", true); svg.append("g") .attr("class", "grid") .attr("transform", "translate(0," + height + ")") .call(xaxisminor) .selectall(".tick") .data(x.ticks(12), function(d) { return d; }) .exit() .classed("minor", true); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis) .selectall(".tick text") .style("text-anchor", "start") .attr("x", 12) .attr("y", 12); // vertical line today var thedate = new date(); var today = thedate.getmonth()+1 + "/" + thedate.getdate() + "/" + thedate.getfullyear(); svg.append("svg:line") .attr("class", "today") .attr("x1", x(d3.time.format("%x").parsedate(today))) .attr("y1", height) .attr("x2", x(d3.time.format("%x").parsedate(today))) .attr("y2", 0);
in code need change code below,
svg.append("svg:line") .attr("class", "today") .attr("x1", x(d3.time.format("%x").parsedate(today))) .attr("y1", height) .attr("x2", x(d3.time.format("%x").parsedate(today))) .attr("y2", 0); to
svg.append("svg:line") .attr("class", "today") .attr("x1", x(thedate)) .attr("y1", height) .attr("x2", x(thedate)) .attr("y2", 0); d3.time.format("%x") return function takes date object argument , returns date string in %x format. calling parsedate function not available/defined. refer this
hope got it, if not ask me more.
