node.js 서버 측이있는 dc.js

node.js가있는 서버에서 dcCharts 렌더링이 필요합니다. d3.js와 node.js의 예제가 있습니다. 하지만 내 코드는 작동하지 않습니다. 나는 node.js 초보자입니다. yoe는 아이디어가 있으십니까? Node.js를 가진 d3.js에 대한node.js 서버 측이있는 dc.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'); 잘못 생각합니다.

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

감사를

나는 나의 htmlStub 및 dc.pieChart을 알고 변경합니다.

출처

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

이 블로그 게시물은 노드 js에서 d3/dc 및 교차 필터를 보여줍니다. http://bigsnarf.wordpress.com/2012/12/28/multi-dimensional-charting-built-to-work-natively-with-crossfilter-rendered-using-d3-js/ – Ketan

: 당신이 문자열을 어기면 이런

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

오류가 더 명백하다 :

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!'); 
     } 
    });

그런 다음 ImageMagick과 같은 명령 줄 도구를 사용하여 svg를 png로 변환하십시오. 예를 보려면 다음 게시물을 참조하십시오. http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to-png-with.html

출처

2014-03-28 00:52:10

감사합니다. 오류 메시지가 있습니다. 사라졌어 =) – user3181885

불행하게도 나는 결국 도표를 얻지 못했다. ... 결국 png-Chart를 얻는 방법을 생각해 봤어? – user3181885

기존 코드는 html 파일을 생성해야합니다. 웹 브라우저를 사용하여 수동으로 파일을 처리 할 수 있습니다. 보다 자동화 된 프로세스가 필요하면 출력을 HTML 대신 .svg 파일로 저장할 수 있습니다. 코드는 위에서 추가 한 코드처럼 보입니다. –

htmlStub가 잘못되었습니다. 추가 </script>이 있습니다. 이는 거의 확실하게 node.js를 실행하지 못하게합니다.

그것은 (아마도)해야한다 : 당신은 당신의 모듈 내부 전역 변수 D3 할 필요가

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

node.js 서버 측이있는 dc.js

답변

관련 문제