Question

我希望在我的svg上有一条垂直线，表示X轴上的当前时间。问题是x1和x2坐标非常错误。

我的x轴是d3.time.scale（）。

var x = d3.time.scale()
        .domain([new Date(2000, 0, 1, 0), new Date(2000, 0, 2, 0)])
        .range([0, 1800]);

这是我的xAxis，在这种情况下，我认为它实际上并不重要。

var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(d3.time.minute, 60)
        .tickFormat(d3.time.format("%H:%M"))
        .orient("top");

我真的知道并理解这个音阶的作用，这意味着它从一个域映射到一个范围（如官方d3文档中所述）。

我仍然有疑问，因为当我想绘制一条垂直线时，我正在创建一个新的约会 var today = new Date()但是当我将其传递给比例时，它不会出现在屏幕上。如果我记录x映射的今天的值，则完全错误：

console.log(today) results in Thu Sep 22 2016 10:26:09 GMT+0100 (GMT Daylight Time) - which is OK
console.log(x(today)) results in -51059.03733651621 - which is WRONG (i.e. it's not in range (0, width)

这是我创建和追加该行的代码。

svg.append("line")
            .attr("class", "line")
            .attr("x1", x(today))
            .attr("y1", margin.top)
            .attr("x2", x(today))
            .attr("y2", height - margin.top - margin.bottom)
            .style("stroke-width", 2)
            .style("stroke", "red")
            .style("fill", "none");`

我已阅读this related post以及与堆栈和Google相关的所有内容，但仍然无法解决x(today)未映射到相关范围的原因。我还考虑过我的域名及时回归 - ＆gt; 2000 ，今天它是在2016年并相应地改变了我的域名，但仍然映射是错误的。

任何帮助都是值得的。谢谢！

编辑：here是一个不起作用的小提琴，而here is a fiddle解释了我想要实现的，但它基本上是硬编码的！

Answer 1

问题是修复，感谢@GerardoFurtado的帮助，他指出如果DOMAIN对我传递的日期有效（即今天包含在域中），它将产生一个有效输出（在范围间隔内）。

我的非常愚蠢错误是即使我可能会出现问题，但我没有考虑到 JS日期从0开始（1月 - 0）。

当@GerardoFurtado在我的域中添加了有效间隔时，正在正确绘制线条。

如果这对某人有用，我还会添加一个位，以确保在任何时候运行该应用程序，它将具有 S tart O <之间的有效间隔/ strong> f D 今天和 S tart O f D ay 明天。

var x = new Date(); var today = new Date(x.getFullYear(),getMonth(),x.getDate(),0,0,0); var tomorrow = new Date(today);

Here是一个更新的小提琴。非常感谢您输入@GerardoFurtado和@Aravind Cheekkallur。

如果有人可能会阅读此内容，请确保您的 INPUT 包含在您的域中！

D3.js垂直线表示时间刻度上的当前时间点

1 个答案: