Javascript Girl
  1. Javascript Girl
  3. Comment puis-je exécuter un javascript en tant que script node.js sans DOM?
Intereting Posts
Comment diviser une cellule en 2 dans jqgrid? AngularJS: créer un modèle de directive de portée isolée à la portée parentale Concaténation en javascript? Obtenir ng-repeat complet dans la directive angulaire Comment puis-je enregistrer / exporter un fichier SVG après avoir créé un SVG avec D3.js (IE, safari et chrome)? Fancybox sur CDN Comment puis-je générer des sources lors de l'utilisation de babel et du webpack? Comment puis-je empêcher Firefox de mettre en cache le contenu d'une zone de texte sur localhost? Pourquoi les navigateurs font-ils inefficacement 2 demandes ici? SignalR Connection Blocked Jusqu'à ce que les images de la page soient chargées La mémoire JavaScript et les limitations HTML5 LocalStorage sur les smartphones Ng-repeat sur un tableau d'objets Qu'est-ce qui se passe en JavaScript lorsque j'utilise la déclaration de fonction "style traditionnel" C? AngularJS – Changer le contrôleur par condition? Existe-t-il un moyen d'appeler une méthode de classe Javascript depuis ExternalInterface?

Comment puis-je exécuter un javascript en tant que script node.js sans DOM?

Https://github.com/jasondavies/d3-cloud est un nuage de mots en javascript utilisant la bibliothèque D3. C'est une démo interactive . La démo a utilisé le script d3-cloud pour générer un SVG dans le HTML.

J'aimerais utiliser cela sur le côté du serveur et obtenir node.js pour me générer un fichier SVG et l'enregistrer sur le disque chaque fois que je mettais à jour mes données au lieu de charger la bibliothèque D3 sur le navigateur et de le rendre là-bas. Y a-t-il un moyen de faire cela? Puis-je utiliser des bibliothèques qui semblent dépendre du DOM HTML sans DOM?

Je suis nouveau sur node.js

Vérifiez jsdom . Vous pouvez accéder à un contexte de fenêtre que vous pouvez alors effectuer vos opérations d3. Ensuite, utilisez le fichier nœud pour l'enregistrer dans un système de fichiers 

// Count all of the links from the Node.js build page var jsdom = require("jsdom"); jsdom.env( "http://nodejs.org/dist/", ["http://code.jquery.com/jquery.js"], function (errors, window) { console.log("there have been", window.$("a").length, "nodejs releases!"); } );

J'ai pris la suggestion de TheHippo et j'ai utilisé PhantomJS , j'ai créé 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("<?xml version=\"1.0\"?>"+svgData); } phantom.exit(); });

Wordcloud.html: 

 <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="d3.min.js"></script> <script src="d3.layout.cloud.js"></script> <script> var fill = d3.scale.category20(); d3.layout.cloud().size([500, 800]) .words([ "Hello", "world", "normally", "you", "want", "more", "words", "than", "this"].map(function(d) { return {text: d, size: 10 + Math.random() * 90}; })) .padding(5) .rotate(function() { return ~~(Math.random() * 2) * 90; }) .font("Impact") .fontSize(function(d) { return d.size; }) .on("end", draw) .start(); function draw(words) { d3.select("body").append("svg") .attr("width", 500) .attr("height", 800) .attr("id","svg1") .attr("xmlns","http://www.w3.org/2000/svg") .attr("xmlns:xlink","http://www.w3.org/1999/xlink") .append("g") .attr("transform", "translate(150,150)") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function(d) { return d.size + "px"; }) .style("font-family", "Impact") .style("fill", function(d, i) { return fill(i); }) .attr("text-anchor", "middle") .attr("transform", function(d) { return "translate(" + [dx, dy] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); } </script> </body></html>

Ensuite, je cours 

 phantomjs svggen.js > svgFile.svg

Le svgFile.svg résultant est un fichier SVG autonome. Pour d3cloud, vérifiez ceci .

Vous n'avez pas besoin de phantomjs si vous rendez simplement un svg avec d3.js

Vous pouvez exécuter d3 directement dans node.js 

 global.d3 = d3 = require "d3" cloud = require 'd3.layout.cloud' fs = require 'fs' draw = (words) -> d3.select("body").append("svg").attr("width", 500).attr("height", 800).attr("id", "svg1").attr("xmlns", "http://www.w3.org/2000/svg").attr("xmlns:xlink", "http://www.w3.org/1999/xlink").append("g").attr("transform", "translate(150,150)").selectAll("text").data(words).enter().append("text").style("font-size", (d) -> d.size + "px" ).style("font-family", "Impact").style("fill", (d, i) -> fill i ).attr("text-anchor", "middle").attr("transform", (d) -> "translate(" + [dx, dy] + ")rotate(" + d.rotate + ")" ).text (d) -> d.text fill = d3.scale.category20() cloud().size([500, 800]).words(["Hello", "world", "normally", "you", "want", "more", "words", "than", "this"].map((d) -> text: d size: 10 + Math.random() * 90 )).padding(5).rotate(-> ~~(Math.random() * 2) * 90 ).font("Impact").fontSize((d) -> d.size ).on("end", draw).start() svg = d3.select('body').node().innerHTML console.log svg fs.writeFile 'svgFile.svg', svg

Vous pouvez créer un DOM sans document en créant un fragment de document . Une fois que vous avez cela, vous pouvez ajouter un élément <svg> racine à celui-ci, puis passer ce nœud à d3.select(node) . À partir de là, le reste des méthodes d3 devrait fonctionner normalement.