Нарисуйте вертикальную линию, представляющую текущую дату в диаграмме gant d3

Question

привет, это может быть очень легко для вас, ребята, мне просто нужно нарисовать вертикальную линию, которая представляет текущую дату в моей диаграмме gant d3. я уже выясняю значения для моего y, у меня просто возникают проблемы с значением в моем X, потому что я использую time.scale по оси x. плохо вставить коды, которые рисуют мою диаграмму Ганта и ту часть, где я рисую мою вертикальная линия расположена в самом низу

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"); 

Answer 1

Просто получить дату сегодня. Не нужно получать дату, месяц и год, потому что она вернет строку. Все, что вам нужно сделать, это поставить дату в вашей x переменного джайв с доменом

var today = new Date(); 
var dd = today.getDate(); //<<===== no need 
var mm = today.getMonth()+1; //January is 0! //<<===== no need 
var yyyy = today.getFullYear(); //<<===== no need 


svg.append("line") 
.attr("x1", x(today)) //<<== change your code here 
.attr("y1", 0) 
.attr("x2", x(today)) //<<== and here 
.attr("y2", height - margin.top - margin.bottom) 
.style("stroke-width", 2) 
.style("stroke", "red") 
.style("fill", "none");