D3时间和日期直方图

D3 time and date histogram

本文关键字：直方图 日期 时间 D3      更新时间：2023-09-26

我试图主要使用时间和日期数据制作直方图，该数据以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);

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

我不认为直方图布局接受非数字输入（我可能错了）。一种选择是通过解析并使用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)）具有基于毫秒数据的域。

所以我明白了，多亏了这里有用的答案。首先，获取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");

我将重新格式化的日期映射到另一个变量：

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);

（31个刻度，因为这是3月份的月度数据）。我去掉了d3×scale，因为它们无论如何都是整数，所以我的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"answers"text"条也是如此（除了我将rect的宽度和文本的x位置更改为固定值，因为示例公式给出了可怕的负值）。再次感谢你的帮助，我相信在不久的将来我会有更多的d3问题。

相关文章：