javascript - d3.js 时间轴上的垂直线

Question

我正在尝试使用 d3js 库在时间轴上绘制一条垂直线。 x 轴是 2015 年。我希望垂直线代表今天(今天始终是当前日期)。我遇到的问题是弄清楚如何准确地将日期作为坐标输入以便正确绘制。 Here is the jsfiddle for the code.

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 函数。 Refer this

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