dc.js с node.js стороне сервера

Я хочу рендеринг dcCharts на сервере с node.js. У меня есть пример с d3.js и node.js. Но мой код не работает. Я начинаю с node.js, надеюсь, у вас есть идея?dc.js с node.js стороне сервера

Код для d3.js с Node.js: example

и вот, что я попробовать с dc.js и Node.js:

var d3 = require('d3') 
, dc = require('dc') 
, jsdom = require('jsdom') 
, fs = require('fs') 
, htmlStub = '<html><head></head><body><div id="dataviz-container"></div><script src="js/d3.v3.min.js"></script></body></html>' 

jsdom.env({ 
features : { QuerySelector : true } 
, html : htmlStub 
, done : function(errors, window) { 
// this callback function pre-renders the dataviz inside the html document, then export result into a static file 

var el = window.document.querySelector('#dataviz-container') 
, body = window.document.querySelector('body') 

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

var parseDate = d3.time.format("%m/%d/%Y").parse; 

data.forEach(function(d) { 
d.date = parseDate(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 hitslineChart = dc.pieChart('dataviz-container'); 
hitslineChart 
.width(500).height(200) 
.transitionDuration(500) 
.colors(d3.scale.category10()) 
.radius(90) 
.dimension(dateDim) 
.group(hits); 

dc.renderAll(); 





// save result in an html file, we could also keep it in memory, or export the  interesting fragment into a database for later use 
var svgsrc = window.document.innerHTML 
fs.writeFile('index.html', svgsrc, function(err) { 
if(err) { 
console.log('fehler beim speichern', err) 
} else { 
console.log('Datei wurde gespeichert!') 
} 
}) 
} // end jsDom done callback 
})

Я думаю var hitslineChart = dc.pieChart('dataviz-container'); неправильно.

меняю знаю, что мой htmlStub и dc.pieChart:

var hitslineChart = dc.pieChart('el'); 

htmlStub = '<html><head></head><body><div id="dataviz-container"></div></script><script type="text/javascript" src="js/d3.js"></script><script type="text/javascript" src="js/crossfilter.js"></script><script type="text/javascript" src="js/dc.js"></script></body></html>'

К сожалению, я до сих пор получаю эту ошибку:

C:\Users\kasse\Code\node-modules\dc\dc.js:2366 
    var _colors = d3.scale.category20c(); 

ReferenceError: d3 is not defined 
at Object.dc.colorChart (C:\Users\kasse\Code\node_modules\dc\dc.js:2366:19) 
at Object.dc.pieChart (C:\Users\kasse\Code\node_modules\dc\dc.js:2971:31) 
at jsdom.env.done (C:\Users\kasse\Code\pre_render.js:44:25) 
at C:\Users\kasse\Code\node_modules\jsdom\lib\jsdom.js:255:9 
at process._tickCallback (node.js:415:13) 
at Function.Module.runMain (module.js:499:11) 
at startup (node.js:119:16) 
at node.js:902:3

Спасибо за любую помощь.

источник

2014-01-31 user3181885

У кого-нибудь есть идеи? Мне отчаянно нужна помощь ... спасибо – user3181885

http://bigsnarf.wordpress.com/2012/12/28/multi-dimensional-charting-built-to-work-natively-with-crossfilter-rendered-using-d3- js/ – Ketan

Попробуйте это сообщение в блоге: d3/dc и cross filter на узле js. http://bigsnarf.wordpress.com/2012/12/28/multi-dimensional-charting-built-to-work-natively-with-crossfilter-rendered-using-d3-js/ – Ketan

Вам нужно сделать d3 глобальной переменной внутри модуля:

global.d3 = d3; 

... chart rendered here 
dc.renderAll(); 

    var svgsrc = window.document.querySelector('#bubbleChart'); 
    fs.writeFile('chart.svg', svgsrc.innerHTML, function(err) { 
     if (err) { 
      console.log('error saving document', err); 
     } else { 
      console.log('The file was saved!'); 
     } 
    });

Затем преобразуйте svg в png с помощью инструментов командной строки, таких как ImageMagick. См. Этот пост для примера: http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to-png-with.html

источник

2014-03-28 00:52:10

спасибо .. массаж ошибок ушел =) – user3181885

К сожалению, я не получил диаграмму в конце ... у вас есть идея, как я получаю png-Chart в конце? – user3181885

Существующий код должен был создать html-файл. Вы можете вручную обработать файл, просмотрев его с помощью своего веб-браузера. Если вам нужен более автоматический процесс, вы можете сохранить вывод в виде файла .svg вместо HTML. Код будет выглядеть как код, который я добавил выше. –

Ваш htmlСуб неправильно, имеет дополнительные </script> в; что почти наверняка приводит к тому, что node.js не сможет запустить его.

Он должен (вероятно) будет:

htmlStub = '<html><head></head><body><div id="dataviz-container"></div><script type="text/javascript" src="js/d3.js"></script><script type="text/javascript" src="js/crossfilter.js"></script><script type="text/javascript" src="js/dc.js"></script></body></html>';

Ошибки, как это более очевидно, если разбить строки:

htmlStub = '<html><head></head><body>'; 
    htmlStub += '<div id="dataviz-container"></div>'; 
    htmlStub += '<script type="text/javascript" src="js/d3.js"></script>'; 
    htmlStub += '<script type="text/javascript" src="js/crossfilter.js"></script>'; 
    htmlStub += '<script type="text/javascript" src="js/dc.js"></script>'; 
    htmlStub += '</body></html>';

источник

2014-03-21 17:59:39

ответ

Смежные вопросы