2

对于以下数据，

historicalBarChart = [ 
  {
    key: "Cumulative Return",
    values: [
      { 
        "label" : "A" ,
        "value" : 29.765957771107
      } , 
      { 
        "label" : "B" , 
        "value" : 0
      } , 
      { 
        "label" : "C" , 
        "value" : 32.807804682612
      } , 
      { 
        "label" : "D" , 
        "value" : 196.45946739256
      } , 
      { 
        "label" : "E" ,
        "value" : 0.19434030906893
      } , 
      { 
        "label" : "F" , 
        "value" : 98.079782601442
      } , 
      { 
        "label" : "G" , 
        "value" : 13.925743130903
      } , 
      { 
        "label" : "H" , 
        "value" : 5.1387322875705
      }
    ]
  }
];

我将使用 NVD3.js 和 Node js 服务器生成条形图。

我生成 svg 的 Nodejs 代码：** NVD3svgnode.js **

var http = require('http'),
    url = require('url'),
    jsdom = require('jsdom'),
    child_proc = require('child_process'),
    w = 400,
    h = 400,          
    scripts = ["file://"+__dirname+"/d3.min.js",
               "file://"+__dirname+"/d3.layout.min.js",
                "file://"+__dirname+"/nv.d3.min.js",
               "file://"+__dirname+"/bar.js"],

    htmlStub = '<!DOCTYPE html><div id="bar" style="width:'+w+'px;height:'+h+'px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg></div>';

    http.createServer(function (req, res) {
           res.writeHead(200, {'Content-Type': 'image/svg+xml'});
           jsdom.env({features:{QuerySelector:true}, html:htmlStub, scripts:scripts,   done:function(errors, window) {
                var chart1= window.bar();

       d3.select('#bar svg')
         .datum(historicalBarChart)
         .transition().duration(500)
         .call(chart1);
          }});
}).listen(8888);

我生成 bar 的 NVD3 代码是： bar.js

function bar(){
var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .staggerLabels(true)
      .tooltips(false)
      .showValues(true);
return chart;
}

在执行节点 js NVD3svgnode.js 时，我收到以下异常

    file:///Users/administrator/Downloads/nodejs/d3.js:5347
        var t = g.transform.baseVal.consolidate();
                           ^
**strong text**TypeError: Cannot read property 'baseVal' of undefined
    at d3.transform (file:///Users/administrator/Downloads/nodejs/d3.js:5347:28)
    at Object.d3.transform (file:///Users/administrator/Downloads/nodejs/d3.js:5350:7)
    at d3_interpolateTransform (file:///Users/administrator/Downloads/nodejs/d3.js:5394:35)
    at Object.<anonymous> (file:///Users/administrator/Downloads/nodejs/d3.js:7697:32)
    at d3_Map.<anonymous> (file:///Users/administrator/Downloads/nodejs/d3.js:7858:31)
    at d3_Map.d3_class.forEach (file:///Users/administrator/Downloads/nodejs/d3.js:271:13)
    at start (file:///Users/administrator/Downloads/nodejs/d3.js:7857:28)
    at Object.callback (file:///Users/administrator/Downloads/nodejs/d3.js:7851:38)
    at d3_timer_mark (file:///Users/administrator/Downloads/nodejs/d3.js:2075:80)
    at d3_timer_step [as _onTimeout] (file:///Users/administrator/Downloads/nodejs/d3.js:2048:15)

对这个问题的任何帮助都会很棒。

4

1 回答 1

0

我建议您删除transition().duration(500)代码中的调用，我认为这在服务器端没用（它在服务器上执行，而不是在客户端上执行，因此用户不会看到转换）并且您的堆栈跟踪指的是转换效果所以它可能会解决你的问题。

（我有同样的问题，删除我的转换修复了它）。

于 2015-02-10T16:40:45.637 回答