D3.js dc.js中的Timeseries折线图-时间维度不工作

我是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();


};

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

200:对象 调整结束：90.22737 收盘价：93.8913 日期：“2015年4月3日” 高：93.8913 低：93.8913 开放时间：93.8913 数量：0 日期：4月3日星期五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 ?!?!?!?

我在控制台中还遇到以下错误：“UncaughtTypeError:当我尝试将DateDim记录到控制台时，无法读取undefined的属性“top”

在此方面的任何帮助都将不胜感激

谢谢

你有密码吗

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;

---

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

抱歉，我还意识到有语法错误-我已将console.log（DateDim.top）（5）更改为console.log（DateDim.top（5））；尽管如此，我仍然在控制台中收到以下消息：“最小日期未定义，最大日期未定义”谢谢Ethan！这解决了1个问题，并且值不再被视为“未定义”。然而，我仍然遇到两个问题。（A） 最小/最大日期似乎不反映实际日期。我的实际数据日期范围为1999年1月4日至2016年1月8日，但日志显示最短日期为2004年1月4日星期二00:00:00 GMT+1100（AEDT），最长日期为12月30日星期三99 00:00:00 GMT+1100（AEDT）查看DateDim.top（无限）。分类正确吗？我猜这不是因为DateDim的访问器返回一个对象，而不仅仅是返回d.daydate。其次，（B）在绘制图表时，它没有值（即，只有一个x轴和y轴，没有实际的线显示），因此它似乎仍然在解释数据时遇到问题。我尝试过通过更改var DateDim=ndx.dimension（函数（d）{return d.daydate；}）；-->特别是将return d.daydate更改为return d3.time.day（d.daydate），但这不起作用……啊，对不起。我错了。被卷曲的牙套和移动设备甩了。你能分享一下问题中的一些数据吗？或者更好的是，在JSFIDLE或类似网站上创建一个工作示例？感谢您的超级快速响应Ethan:）我对这一点非常陌生-我如何看待排序？