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
      }
    ]
  }
];

Node js サーバーで NVD3.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);

バーを生成するための私の 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 に答える