javascript - D3.js:time.scale.utc() 似乎对我没有任何作用？

Question

我正在尝试使用 d3.time.scale.utc() 生成在任何设备上都相同的时间标度，如 mentioned in the docs .

但是，以下两种比例似乎都生成本地格式的刻度日期 - 在我的例子中，返回的日期使用 BST 和 GMT:

var start = new Date("Mon Oct 21 2013 00:00:00 GMT+0000 (BST)");
var end = new Date("Mon Dec 02 2013 00:00:00 GMT+0000 (GMT)")

var x = d3.time.scale.utc()
    .domain([start, end])
    .range([0, 800])
    .ticks(d3.time.mondays, 1);
console.log(x);

var y = d3.time.scale()
    .domain([start, end])
    .range([0, 800])
    .ticks(d3.time.mondays, 1);
console.log(y);

如何让 D3 为我生成未设置为本地时区的报价日期？

在这里 fiddle :http://jsfiddle.net/qE9ur/

Answer 1

问题很简单，您正在将日期对象记录到控制台，并且您的浏览器正在对这些对象应用默认格式以将它们转换为您本地的时区。

使用 d3.time.scale.utc() 不会更改日期对象。自 1970 年以来，Javascript 日期对象始终在内部存储为毫秒数。

UTC 刻度的独特之处在于 tickFormat函数，它使用 UTC time formatter默认情况下。但是，刻度格式功能不会影响到控制台的日志记录，只有当您实际将刻度绘制为标签时才会如此!

下面的 fiddle 实际上使用了每个刻度的刻度格式化功能来格式化记录到控制台的日期对象:
http://jsfiddle.net/qE9ur/1/

var start = new Date("Mon Oct 21 2013 00:00:00 GMT+0100 (BST)");
var end = new Date("Mon Dec 02 2013 00:00:00 GMT+0000 (GMT)")

var xScale = d3.time.scale.utc()
    .domain([start, end])
    .range([0, 800]);
var xTicks =  xScale.ticks(d3.time.mondays, 1);

console.log( xTicks.map( xScale.tickFormat() ) );

var yScale = d3.time.scale()
    .domain([start, end])
    .range([0, 800]);
var yTicks = yScale.ticks(d3.time.mondays, 1);

console.log(yTicks.map( yScale.tickFormat() ) );

但是，您会发现另一个问题(假设您不在 GMT 时区)。时间刻度的默认格式化函数是多种格式:如果值不是午夜，它将返回时间而不是日期。当您将刻度指定为 星期一 时，它仍将它们计算为您当前时区的星期一午夜，对我来说是 UTC 的 6 或 7 小时。

这就是为什么所有时间间隔函数也有 UTC 版本的原因。将刻度规范更改为

var xTicks =  xScale.ticks(d3.time.mondays.utc, 1);

获取在 UTC 午夜下降的刻度值:http://jsfiddle.net/qE9ur/2/

综上所述，您可能仍想指定一个自定义刻度格式化程序。当您仅在星期一扫描多个月份时，星期几 + 月份格式实际上不起作用。