Question

我正在尝试使用以下格式在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);

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

Answer 1

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

Answer 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问题。

D3时间和日期直方图

2 个答案: