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

Question

嗨，这对你们来说可能很容易，我只需要在我的 d3 甘特图中画一条代表当前日期的垂直线。我已经弄清楚了我的 y 的值我只是在我的 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");