不能在dc.js / d3.js折线图上显示y-ticks

时间:2014-08-02 10:57:07

标签: javascript d3.js charts dc.js

我有一些表格的样本市场数据:

"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) 

这是图表当前呈现的方式: How the chart renders currently

问题是,如何才能显示y-ticks?

1 个答案:

答案 0 :(得分:0)

.y(d3.time.scale().domain([(min-adj), (max+adj)]));行中,当我假设您希望它显示小数时,您将y轴设置为使用时间刻度。

尝试将其切换为.y(d3.scale.linear().domain([(min-adj), (max+adj)]));或类似内容。我很确定这可能就是为什么没有值显示的原因。