1

我正在尝试在 D3 折线图上格式化我的 x 轴，但值完全错误。数据来自 Postgres 数据库“带时区的时间戳”列，我将其转换为 json 以通过 D3 提供服务。

D3 片段

data.forEach(function(d) {
    d.timestamp = new Date(d.timestamp*1000);
    d.close=+d.close;
}
var timeFormat = d3.time.format("%d %b %y %X");
var x = d3.time.scale().range([ 0, width ]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(timeFormat);
x.domain(d3.extent(data, function(d) {
        return d.timestamp;
    }));

Java 转换为 JSON

ResultSet rs = st.executeQuery("select * from price_data order by timestamp);
...     
String.format("{\"timestamp\":\"%d\",\"close\":\"%f\"}",rs.getTimestamp("timestamp").getTime(),rs.getDouble("price"));

值为 1426014732000 的时间戳的轴格式化结果 轴显示格式解释不正确

但我不明白的是，当单步执行我的 javascript 并通过 Chrome 中的 watch 表达式调用它时，timeFormat 函数可以正常工作...... 在此处输入图像描述

4

2 回答 2

3

为什么会发生这种情况我仍然不知道，但解决方法是更改​​数据转换，以不将时间戳乘以 1000，如在线各处所建议的那样。

data.forEach(function(d) {
  //d.timestamp = new Date(d.timestamp*1000);
  d.close=+d.close;
}
var timeFormat = d3.time.format("%d %b %y %X");
var x = d3.time.scale().range([ 0, width ]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(timeFormat);
x.domain(d3.extent(data, function(d) {
        return d.timestamp;
    }));

现在时间戳已正确绘制。也许 PostgreSql 时间戳已经按照 Javascript 中的预期使用毫秒。我将调查并报告给将来可能对此感兴趣的任何人。

于 2015-03-11T22:20:14.380 回答
0

看起来好像你做的大部分事情都是正确的，但是如果没有完整的代码，就真的不可能说出来。你是如何计算domain的scale？就像是：

x.domain(d3.extent(data));

无论如何，我已经把这个简单的例子放在一起，这可能会有所帮助。

于 2015-03-11T12:47:40.643 回答