Временная диаграмма строк в 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(); 


}; 

данные, кажется, загрузка и показ в консоли просто отлично. Мое исходное поле «Дата» отформатировано в формате D3 в моей переменной «daydate». Пример DataPoint в консоли выглядит следующим образом:

200: Объект Adj Закрыть: 90,22737 Закрыть: 93,8913 Дата: "3/04/15" High: 93,8913 Low: 93,8913 Open: 93,8913 Объем : 0 дн.: Пт Апр 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 в консоль.

Любая помощь в этом была бы высоко оценена!

Спасибо,

J

Answer 1

Проблема была вызвана слишком большим количеством точек данных, отображаемых в barChart. Уменьшение количества точек данных в 1 диаграмме, а также переход от .barChart к .lineChart решил это. Огромное спасибо @Ethan за помощь в устранении этой проблемы и решении ряда дополнительных проблем!

Answer 2

У вас есть код

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;