node.js - Dc.js lineChart 失败

Question

我正在尝试使用 Node 模块 dc linechart 来绘制折线图。 由于 d3 的错误，它对我来说失败了。我使用的是 dc.js 版本 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)

示例代码为

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");

感谢任何帮助。谢谢。

Answer 1

在最后一行代码中，您引用了 DOM Id #test，DC 将在 DOM 中搜索。

但与 Web 浏览器不同的是，NodeJS 本身不提供 DOM。这可以解释错误消息(d3_document 未定义)。

您应该查看 D3 文档: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: ...