dc.js 中的时间序列线图 - 时间维度不起作用

Question

我是 d3 和 dc.js 的新手，我正在尝试制作股票价格的时间序列图表。

出于某种原因，我无法让我的时间维度工作。我感觉这与我的日期格式设置方式有关，我尝试过对此进行试验，但未能解决问题。

我的代码如下

//create global variable 'stockpricedata' to store CSV data;  
var stockpricedata = [];

//create global variable to enable parsing of dateFormat
var dateFormat = d3.time.format('%d/%m/%Y');


//create function that will input CSV data and draw a timechart.
//this function is called in a seperate piece of code using queue.js
//the code that loads the CSV data is also executed separately to this code

function makeChart(error, data) {

  //First lets create a nested function that converts 'Test_Score' variable 
  //from char to numeric

  function convData(data) {

    stockpricedata = data;
    stockpricedata.forEach(function(d){ 
      d['Open'] = +d['Open']; 
      d['High'] = +d['High']; 
      d['Low'] = +d['Low']; 
      d['Close'] = +d['Close']; 
      d['Volume'] = +d['Volume'];    
      d['Adj Close'] = +d['Adj Close']; 
      d['Adj Close'] = +d['Adj Close'];
      d.daydate = dateFormat.parse(d.Date);


    });

    };

  //Call the function
  convData(data);


  //initiate crossfilter

  var ndx = crossfilter(stockpricedata);
  var all = ndx.groupAll();

  //test ndx object to ensure that it initiated correctly
  var n = ndx.groupAll().reduceCount().value();
  console.log(stockpricedata);
  console.log("Lets say there are " + n + " datapoints in my file"); //yes, this is showing a valid number, so this is working.


  //Create 'Date' dimension that returns the DAY.
  var DateDim = ndx.dimension(function(d) 
    {return d.daydate;}
    );
  console.log(DateDim.top(5))



  //Create 'Sum' grouping to Sum the price (there will only be 1 for each day, so should just show the stockprice) to calculate y-axis

  var PriceGroup = DateDim.group().reduceSum(function(d){return d.Close;}); //d.Close is the 'closing price' datapoint


  //create chart object and link it to HTML element
  var StockPriceChart  = dc.barChart('#histprice-line-chart');


  //create minDate and maxDate variables so that we can set the x-axis scale.

  var minDate = DateDim.bottom(1)[0].date;
  var maxDate = DateDim.top(1)[0].date;
  console.log("min date is " + minDate + " and max date is " + maxDate);

  //chart attributes
   StockPriceChart
      .width(600)
      .height(180)
      .dimension(DateDim) //x-axis (range of scores)
      .group(PriceGroup) //y-axis 
      .x(d3.time.scale().domain([minDate,maxDate]))
      .elasticY(true)
      .xAxisLabel('Time')
      .yAxisLabel('Price')
     //.xAxis();
     // .margins({top: 10, right: 20, bottom: 50, left: 50});

     // showtime!
    dc.renderAll();


};

数据似乎正在加载并正常显示在控制台中。我的原始 'Date' 字段在我的 'daydate' 变量中被格式化为 D3 格式。控制台中的示例数据点如下：

200: 对象调整关闭：90.22737 收盘价：93.8913 日期：“3/04/15” 高：93.8913 低价：93.8913 开盘价：93.8913 体积：0 日期：15 月 3 日星期五 00:00:00 GMT+1100 (AEDT)

但由于某些原因，以下代码似乎无法正常工作。

var DateDim = ndx.dimension(function(d) 
{return d.daydate;}
);
console.log(DateDim).top(5); // ?!?!? why is this not working ?!?!?!?

当我尝试将 DateDim 记录到控制台时，我还在控制台中收到以下错误：'Uncaught TypeError: Cannot read 属性 'top' of undefined'。

如有任何帮助，我们将不胜感激！

谢谢，

J

Answer 1

你有密码

var minDate = DateDim.bottom(1)[0].date;
var maxDate = DateDim.top(1)[0].date;

您的数据记录包含属性 daydate 和 Date，但不包含 date。所以 DateDim.bottom(1)[0].date 和 DateDim.top(1)[0].date 是未定义的。将其更改为：

var minDate = DateDim.bottom(1)[0].daydate;
var maxDate = DateDim.top(1)[0].daydate;

Answer 2

问题最终是由条形图中呈现的数据点过多引起的。减少 1 个图表中数据点的数量，以及从 .barChart 更改为 .lineChart 解决了这个问题。非常感谢@Ethan 帮助解决此问题并解决了许多其他问题！

dc.js 中的时间序列线图 - 时间维度不起作用

Timeseries line-chart in dc.js - time Dimension not working

time-series

timeserieschart

d3.js

crossfilter

dc.js