D3js: ¿cómo generar archivos SVG independientes? (Nodejs)

Dado un código D3js , como por ejemplo :

function () { var svg = window.d3.select("body") .append("svg") .attr("width", 100) .attr("height", 100); svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 80) .attr("height", 80) .style("fill", "orange"); } 

¿Cómo generar un archivo * .svg independiente correcto con mi código D3js y NodeJS?

Github repository svgcreator.node.js para probar.


A D3 no le importa en absoluto lo que realmente genere su SVG. El principal problema con la creación de solo SVG es que no puede tener Javascript entonces, lo que por supuesto significa que no puede usar D3. Aparte de este fundamental no-no, no hay nada que te detenga 🙂

Prueba de concepto: inspirado en la otra respuesta, aquí hay un código de prueba de concepto utilizando jsdom .

1. Instale NodeJS ( 1 ).

 curl http://npmjs.org/install.sh | sh #this should work (not tested) 

2. Instale jsdom utilizando el administrador de paquetes de nodo ( 2 ):

 $npm install jsdom 

3. Envuelva su código D3js dentro de algún código jsdom, péguelo en un archivo jsdom.node.js :

 var jsdom = require('jsdom'); jsdom.env( "", [ 'http://d3js.org/d3.v3.min.js' ], function (err, window) { var svg = window.d3.select("body") .append("svg") .attr("width", 100).attr("height", 100); svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 80) .attr("height", 80) .style("fill", "orange"); // PRINT OUT: console.log(window.d3.select("body").html()); // fs.writeFileSync('out.svg', window.d3.select("body").html()); // or this } ); 

4. Ejecutar en terminal

 $node jsdom.node.js > test.svg 

El resultado de la salida estándar es el SVG, que luego se inyecta en un archivo test.svg. Trabajo hecho.

Como Gilly señala en los comentarios, es posible que necesite la versión 3 de jsdom para que esto funcione.

Hace poco quise hacer eso e hice una pregunta aquí . Me apuntaron a phantomJS . Usando PhantomJS, creé un JS –

svggen.js:

 var page = require('webpage').create(), url = 'http://www.example.com/wordcloud.html'; page.open(url, function (status) { if (status !== 'success') { console.log('Unable to access network'); } else { var svgData = page.evaluate(function(s){ var serializer = new XMLSerializer(); var element = document.getElementById("svg1"); return serializer.serializeToString(element); }); console.log(""+svgData); } phantom.exit(); }); 

wordcloud.html:

        

Entonces corro

 phantomjs svggen.js > svgFile.svg 

El svgFile.svg resultante es un archivo SVG independiente. Para d3cloud compruebe esto .

node.js es el camino a seguir. Puedes instalar d3 directamente con npm. (También agregará jsdom como una dependencia para proporcionar un DOM “falso”). Después de que el código d3 genere el SVG, simplemente tome su contenido y escriba en un archivo.

Aquí hay un script de nodo muy corto que generará un svg a la salida estándar generada con d3.js.

 #!/usr/bin/env node var d3 = require("d3"), jsdom = require("jsdom").jsdom; var body = d3.select(jsdom().documentElement).select("body"); var svg = body.append("svg"); process.stdout.write(body.node().innerHTML); 

Enlace al fragmento en bl.ocks.org

Si no quiere usar node.js, entonces use phantomJs, aquí puede encontrar una demostración https://github.com/subtwignya2107/d3js-phantomjs-demo.git