我正在尝试使用以下格式在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);
格式语法是否与我的时间和日期格式正确对应?
答案 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问题。