hi this maybe very easy for you guys i just need to draw a vertical line that represents the current date in my d3 gantt chart. i already figure out the values for my y i just having trouble in the value in my X because im using a time.scale in my x-axis. ill paste the codes that draws my gantt chart and the part where i draw my vertical line is located at the very bottom

initTimeDomain(tasks);

initAxis();



var numFormat = d3.format(,.0f);

var dateFormat = d3.time.format(%Y-%b-%d);

var parseDate = d3.time.format(%Y-%b-%d).parse;



var svg = d3.select(#gantt_chart)

.append(svg)

.attr(class, chart)

.attr(width, width + margin.left + margin.right)

.attr(height, height + margin.top + margin.bottom)

.append(g)

    .attr(class, gantt-chart)

.attr(width, width + margin.left + margin.right)

.attr(height, (height + margin.top + margin.bottom) / tasks[tasks.length - 1].endDate)

.attr(transform, translate( + margin.left + ,  + margin.top + ));





 //this is the x-axis

 svg.append(g)

 .attr(class, x axis)

 .attr(transform, translate(0,  + (height - margin.top - margin.bottom) + ))

 .transition()

 .call(xAxis)

 .selectAll(text)

    .style(text-anchor,end)

    //.attr(dx, 35)

    //.attr(dy, 5);

    .attr(dx, -.8em)

    .attr(dy, -10)

    .attr(transform, function(d){return rotate(-90)});





 //this is the y-axis

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









//this is the actual gantt

svg.selectAll(.chart)

 .data(tasks, keyFunction).enter()

 .append(rect)

 .attr(rx, 0)

  .attr(ry, 0)

 .attr(class, function(d){ 

 if(d.status > 70)

 { 

    return bar-failed;

 }

 else if (d.status >= 51 && d.status <= 70){

    return bar-killed;

 }

 else{

    return bar-running;

 }

 }) 

 .attr(y, 0)

 .attr(transform, rectTransform)

 .attr(height, function(d) { return y.rangeBand(); })

 .attr(width, function(d) { 

     return (x(d.endDate) - x(d.startDate)); 

     })

.on(mouseover, function(d){

        div.transition()

            .duration(200)

            .style(opacity, .9);

        div.html(HandlerID:  + d.taskName  + <br> +  startDate:  + dateFormat(d.startDate) + <br/> + 

                endDate:  + dateFormat(d.endDate) + <br/> + % Insertions:  + d3.round(d.status,2) + % + <br/> +

                Insertions:  + numFormat(d.insertions) )                       

            .style(left, (d3.event.pageX) + px)

            .style(top, (d3.event.pageY - 28) + px);

})

.on(mouseout,function(d){

        div.transition()

            .duration(500)

            .style(opacity, 0);

});





var today = new Date();

var dd = today.getDate();

var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();



if(dd<10) {

    dd='0'+dd

} 



if(mm<10) {

    mm='0'+mm

} 



today = yyyy+'-'+mm+'-'+dd;

today = parseDate(today);

//document.write(today);



svg.append(line)

.attr(x1, today)

.attr(y1, 0)

.attr(x2, today)

.attr(y2, height - margin.top - margin.bottom)

.style(stroke-width, 2)

.style(stroke, red)

.style(fill, none);