D3时间和日期直方图

时间:2014-04-29 04:42:13

标签: javascript d3.js histogram date-formatting

我正在尝试使用以下格式在json文件(以及其他信息)中提供的主要时间和日期数据制作直方图:2014-03-01 00:18:00。我看了http://bl.ocks.org/mbostock/3048450作为一个例子,但我没有设法破解它。关键部分似乎是这样的:

    var data = d3.layout.histogram()
        .bins(x.ticks(20))
        (dataset.timestamp);

当我在浏览器中查看我的代码时,它会显示“TypeError:data is undefined”,并引用d3.v3.js第5878行。

假设我修复了这个错误,它可能偶然发现的下一个地方是轴格式化:

    var formatDate = d3.time.format("%y-%m-%d %h:%m:%s");

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(formatDate);

格式语法是否与我的时间和日期格式正确对应?

2 个答案:

答案 0 :(得分:3)

我不认为直方图布局接受非数字输入(我可能是错的)。一种选择是通过解析和使用getTime()将日期转换为自1970年以来的毫秒数:

var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

var data = d3.layout.histogram()
    .bins(x.ticks(20))
    .value(function(d) {return formatDate.parse(d.timestamp).getTime()})
    (dataset);

您需要确保x比例(如x.ticks(20)中所示)具有基于毫秒数据的域。

答案 1 :(得分:2)

所以我想通了,感谢这里有用的答案。首先,获取json数据:

d3.json("inkmarch.json", function(error, json) {
        if (error) return console.warn(error);
        dataset = json; 

然后我指定一个特定于我的日期格式的格式变量:

var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

我将重新格式化的日期映射到另一个var:

mappedSet = (dataset.map(function(d) {return formatDate.parse(d.timestamp).getTime()}))

最后我可以制作一个合适的直方图数据集。

var data = d3.layout.histogram()
            .bins(x.ticks(31))
            .value(function(d) {return formatDate.parse(d.timestamp).getTime()})
            (dataset);

(因为这是3月份的月度数据,所以是31个滴答)。我取消了d3.time.scale,因为他们无论如何都是整数,所以我的尺度看起来像这样:

var x = d3.scale.linear()
        .domain([d3.min(mappedSet), d3.max(mappedSet)])
        .range([0, width]);
var y = d3.scale.linear()
        .domain([0, d3.max(data, function(d) { return d.y; })])
        .range([height, 0]);

(仍然不确定y域中的功能是什么)。 svg和bar变量看起来与我在问题帖子中链接的示例完全一样,'rect'和'text'栏也是如此(除了我将rect的宽度和文本的x位置更改为固定值,因为示例公式给出了可怕的负面价值观)。 再次感谢您的帮助,我相信在不久的将来我会有更多的d3问题。