D3时间和日期直方图 [英] D3 time and date histogram

问题描述

我试图使用主要的时间和日期数据，在json文件（以及其他信息）中提供此格式的直方图：2014-03-01 00:18:00。我已查看 http://bl.ocks.org/mbostock/3048450 作为示例，但我没有设法破解它。关键部分似乎是这样：

I'm attempting to make a histogram using primarily time and date data, provided in a json file (along with other info) in this format: 2014-03-01 00:18:00. I've looked at http://bl.ocks.org/mbostock/3048450 as an example, but I haven't managed to crack it. The key part seems to be this:

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

当我在浏览器中查看我的代码时，它会给出TypeError：data is undefined d3.v3.js line 5878。

When I view my code in the browser it gives "TypeError: data is undefined", and refers to d3.v3.js line 5878.

假设我修复了这个错误，下一个可能会崩溃的是轴格式化：

Assuming I fix that error, the next place it may stumble is the axis formatting:

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

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

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

Will the format syntax correspond correctly to my time and date format?

推荐答案

所以我想出来，感谢在这里的有用的答案。首先，获取json数据：

So I figured it out, thanks to the helpful answers here. First off, the json data is acquired:

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

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

Then I specify a formatting variable specific to my date formatting:

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

重新格式化日期到另一个var：

I map the re-formatted dates to another var:

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

最后我可以做一个合适的直方图数据集。 / p>

And finally I can make a proper histogram dataset.

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

（31分钟，因为这是来自三月的每月数据）。我没有使用d3.time.scale，因为它们是整数，所以我的刻度看起来像这样：

(31 ticks since this is monthly data from March). I did away with the d3.time.scale since they were integers anyway, so my scales look like such:

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 vars看起来像我在问题中链接的示例，'rect'和'text'栏（除了我将文本的rect和x位置的宽度更改为固定值，因为示例公式丑恶的负值）。
再次感谢您的帮助，我相信在不久的将来我会有更多的d3问题。

(Still not sure what the function in the y domain does). The svg and bar vars look exactly like the example I linked in my question post, as do the 'rect' and 'text' bars (except I changed width of rect and x position of the text to fixed values since the example formulas were giving hideous negative values). Thanks again for the help, I'm sure I'll have more d3 questions in the near future.

这篇关于D3时间和日期直方图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！