CSS / eixos de riquixá no JSDOM

Question

Feb 24, 2014, 08:16 PM

CSS / eixos de riquixá no JSDOM

Estou usando o Node em um aplicativo do lado do servidor, para produzir dinamicamente gráficos. Estou usando d3.js e rickshaw.js para criar versões SVG do gráfico e imagemagick para converter esse SVG em png. Estou usando JSDOM como meu DOM.

Estou recebendo este erro:https://github.com/shutterstock/rickshaw/issues/186

A solução dada aqui é extrair o css, encontrei uma resposta no estouro de pilha sobre como fazer isso com o JSDOM:

Como você anuncia folhas de estilo para JSDOM

Então, eu segui estas instruções e puxei um rickshaw.css. Quando imprimo o DOM no console, posso vê-lo na cabeça, em um elemento de estilo.

var mainCss = fs.readFileSync(path.normalize("rickshaw.css"), 'utf8');
console.log("mainCss",mainCss);
var document = jsdom.jsdom("<!DOCTYPE html><html><meta http-equiv=\"content-type\"content=\"text/html; charset=utf-8\"><head></head><body id=\"abody\"><div id=\"chart_container\"><div id=\"y_axis\"></div><div id=\"chart\"></div></div></body></html>", jsdom.level(3, 'index'), {
    features : {
        FetchExternalResources : ['script', 'css'],
        QuerySelector : true
    }
});     

GLOBAL.window = document.parentWindow;
var head = document.getElementsByTagName('head')[0];
style = document.createElement("style");
style.type = 'text/css';
style.innerHTML = mainCss;
head.appendChild(style);

Estou configurando meu gráfico da seguinte forma:

var graph = new Rickshaw.Graph( {
element: document.querySelector('#chart'), 
    width: 600, 
    height: 600, 
    series: seriesArr
});

var yAxis = new Rickshaw.Graph.Axis.Y({
    graph: graph
});

var xAxis = new Rickshaw.Graph.Axis.Time({
    graph: graph,
    timeUnit: "hour"
});


yAxis.render();
xAxis.render();

graph.render();

utils.convertSVGtoPNG(document.querySelector('#chart').innerHTML);

Ainda estou recebendo um quadrado preto, como minha saída SVG.

Estou esquecendo de algo? Estou pensando em algo errado? Qualquer ajuda seria muito apreciada.