d3.js 时间轴上的垂直线

Question

我正在尝试使用 d3js 库在时间轴上绘制一条垂直线。x 轴是 2015 年。我希望垂直线代表今天（今天总是当天）。我遇到的问题是弄清楚如何准确地将日期作为坐标提供以便正确绘制图形。这是代码的jsfiddle。

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

Answer 1

在您的代码中，您只需要更改如下代码，

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

到

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") 这将返回一个函数，它将日期对象作为参数，并以 %x 格式返回日期字符串。但是您正在调用不可用/定义的 parseDate 函数。 参考这个

希望你明白了，如果没有问我更多。