CODEWITHSUNDEEP
node.jsd3.jsdc.js
Aron
Aron

Reputation: 11

Dc.js lineChart failing

I am trying to use node module dc linechart to draw the line chart. Its failing on me with error from d3. I am using dc.js version 2.0.0-beta17.

c:\projects\xxx\node_modules\dc\node_modules\d3\d3.js:1308
  d3_behavior_zoomWheel = "onwheel" in d3_document ? (d3_behavior_zoomDelt
                                       ^
TypeError: Cannot use 'in' operator to search for 'onwheel' in undefined
   at Object.d3.behavior.zoom (c:\projects\xxx\node_modules\dc\node_modules\d3\d3.js:1308:44)
   at Object.dc.coordinateGridMixin (c:\projects\xxx\node_modules\dc\dc.js:2085:29)
   at Object.dc.lineChart (c:\projects\xxx\node_modules\dc\dc.js:4615:35)

Sample code is

var dc = require('dc');
..
var data = [
    {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
    {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
    {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
    {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
    {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
    {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
    {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
    ];

var ndx = crossfilter(data);
data.forEach(function (d) {
    d.date = d3.time.format("%m/%d/%Y").parse(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
});


var dateDim = ndx.dimension(function(d) {return d.date;});
var hits = dateDim.group().reduceSum(function(d) {return d.total;}); 

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


var gitLineChart = dc.lineChart("#test");

Any help is appreciated. Thanks.

Upvotes: 1

Views: 166

Answers (1)

codename44
codename44

Reputation: 887

In your last line of code, you are referencing a DOM Id #test, that DC will search in DOM.

But unlike in web browsers, NodeJS doesn't provide natively a DOM. And this would explain the error message (d3_document is undefined).

You should have a look at D3 documentation : https://github.com/mbostock/d3/wiki#browser--platform-support :

D3 also runs on Node.js. Use npm install d3 to install it.

Note that because Node itself lacks a DOM and multiple DOM implementations exist for it (e.g., JSDOM), you'll need to explicitly pass in a DOM element to your d3 methods like so: ...

Upvotes: 1

Related Questions