在d3甘特图中绘制代表当前日期的垂直线

Question

嗨，这可能对您们很容易，我只需要在我的d3甘特图中绘制代表当前日期的垂直线。我已经找出了我的值，我只是在我的X值有问题，因为我在我的X轴使用time.scale。生病粘贴绘制我的甘特图的代码和我绘制我的垂直线的部分位于最底部

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