Question

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

出于某种原因，我无法让时间Dimension工作。我觉得它与我的日期格式化方式有关，我尝试过这个但是却无法解决问题。

我的代码如下

//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：对象 Adj Close：90.22737 关闭：93.8913 日期：“2015年4月3日” 高：93.8913 低：93.8913 开放时间：93.8913 体积：0 daydate：Fri Apr 03 15 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 ?!?!?!?

我还在控制台中收到以下错误：'未捕获的TypeError：当我尝试将DateDim记录到控制台时，无法读取未定义'的属性'top'。

对此有任何帮助将不胜感激！

谢谢，

Ĵ

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

问题最终是由barChart中渲染的数据点太多引起的。减少1个图表中的数据点数，以及从.barChart更改为.lineChart解决了这个问题。非常感谢@Ethan帮助排除故障并解决了许多其他问题！

dc.js中的时间序列折线图 - 时间尺寸不起作用

2 个答案: