我有一些表格的样本市场数据:
"pair","date","a","b"
EUR/GBP,20130101 21:59:59.592,0.81156,0.81379
EUR/GBP,20130101 21:59:59.595,0.81163,0.81373
我希望绘制每分钟“a”平均值的折线图。 该图表似乎工作正常,但我不能让它显示任何y-ticks。
阅读以下数据:
d3.csv("./EURGBP-chop.csv", function (data) {
/* since its a csv file we need to format the data a bit */
var dateFormat = d3.time.format("%Y%m%d %H:%M:%S.%L");
var numberFormat = d3.format(".2f");
data.forEach(function(d) {
d.dd = dateFormat.parse(d.date);
d.minute = d3.time.minute(d.dd);
d.a = +d.a; //coerce to number
d.b = +d.b;
});
创建交叉过滤器,维度和组(降低到平均值):
var ndx = crossfilter(data);
var dateDimension = ndx.dimension(function (d) {
return d.minute;
});
var group = dateDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);
function reduceAdd(p, v) {
++p.count;
p.total += v.a;
return p;
}
function reduceRemove(p, v) {
--p.count;
p.total -= v.a;
return p;
}
function reduceInitial() {
return {count: 0, total: 0};
}
用于设置y轴域的最小/最大计算:
min = dateDimension.bottom(1)[0].a;
max = dateDimension.top(1)[0].b;
//Want a graph that has a y-scale with head room above and below min/max
//Calculate this as 20% of difference between min and max
adj = (max-min)*0.2;
console.log("adj:" + adj);
设置折线图:
timeChart.width(960)
.height(150)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(dateDimension)
.group(group)
.valueAccessor(function(p) { return p.value.count > 0 ? p.value.total / p.value.count : 0; })
.brushOn(false)
.renderArea(true)
.transitionDuration(500)
// .elasticY(true)
.x(d3.time.scale().domain([new Date(2013,0,2), new Date(2013, 0, 3)]))
//y-axis is set with headroom below min and above max vals
.y(d3.time.scale().domain([(min-adj), (max+adj)]));
我认为问题与我的y轴数据实际来自valueAccessor的事实有关?
我尝试了使用yAxis().tickFormat()
的各种选项,但仍然没有勾选。
最终我决定尝试以刻度格式打印到控制台的值,只是为了调查:(我不确定这是否有效)
.yAxis().tickFormat(function (v) { console.log(v); return v; });
然而,当我这样做时,我注意到它实际上是打印出一个 date ,在那里我预计会有一个大约0.81的小数点。
输出到控制台:
Thu Jan 01 1970 00:00:00 GMT+0000 (BST)
这是图表当前呈现的方式:
问题是,如何才能显示y-ticks?
答案 0 :(得分:0)
在.y(d3.time.scale().domain([(min-adj), (max+adj)]));
行中,当我假设您希望它显示小数时,您将y轴设置为使用时间刻度。
尝试将其切换为.y(d3.scale.linear().domain([(min-adj), (max+adj)]));
或类似内容。我很确定这可能就是为什么没有值显示的原因。