Javascript D3时间和日期直方图

我试图使用json文件（以及其他信息）中提供的主要时间和日期数据制作柱状图，格式如下：2014-03-01 00:18:00。我已经把它作为一个例子，但我还没有设法破解它。关键部分似乎是：

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

当我在浏览器中查看代码时，它给出了“TypeError:数据未定义”，并引用了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);

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

---

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

我认为直方图布局不接受非数字输入（我可能错了）。一个选项是通过解析并使用

getTime（）

，将日期转换为1970年以来的毫秒数：

---

您需要确保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");

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

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.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和条形变量看起来与我在问题帖子中链接的示例完全相同，“rect”和“text”条形也一样（除了我将rect的宽度和文本的x位置更改为固定值，因为示例公式给出了可怕的负值）。

---

再次感谢您的帮助，我相信在不久的将来我会有更多的d3问题。

请查看以更好地理解时间格式。资本化很重要。在这里的例子中，您需要

%Y-%m-%d%H:%m:%S”

为此干杯。现在我只需要解决主要的问题…你能给我们看一下你的数据样本，或者最好是一个完整的例子来说明问题吗？数据是一个巨大的数组，格式为{“timestamp”：“2014-03-01 00:18:00”，“allianceID”：“123548678”，“name”：“XYZABC”，“solarSystem”：“VOL-MI”}。其中有几千个，我想用柱状图显示它们在每个“时间桶”中出现的频率。问题是，

dataset.timestamp

不存在

dataset

是一个数组，其中每个元素都有一个属性

时间戳

。有关如何创建所需数组的示例，请参见；得到了d3.v3.js第35行的“TypeError:array未定义”。一个澄清：如果时间戳是Javascript日期对象，那么数字的转换应该是自动的。但是布局不能自动将字符串转换为日期和数字@如果你想要调试帮助，你需要提供更多的信息。哪一行代码抛出了错误？您是否确认您的数据集被正确读取？在执行文件读取回调之前，此代码不会运行？@AmeliaBR好的，我已经设法消除了错误；我在代码中按错误的顺序做事。然而，现在我得到了一个包含10个元素的条形图，如下所示：

3936

还有9个元素的高度为0，没有文本，似乎所有3936个元素都放在了一个箱子里。我真的很想粘贴一些代码，但是注释中的

code

格式不好，我无法编辑我的原始帖子…我认为问题是由于您使用的垃圾箱造成的（对不起，我应该更清楚地说明这一点）。x标度的单位应与直方图数据的单位相同。（勾选x.ticks（20）以查看情况是否如此）。您还可以尝试检查dataset.map（函数（d）{return formatDate.parse（d.timestamp.getTime（）}），以查看是否存在多个唯一值，如预期的那样。是的，域看起来肯定是罪魁祸首。在控制台中查看变量的一种简单方法是在代码中临时放置

console.log（x）

。对于域，请查看。访问器函数应该类似于代码示例中.value（）中定义的函数。我必须承认，我在这里有点深奥——我从来没有创建过D3柱状图，我也不知道日期柱状图的最佳方法。