如何运行一个javascript作为node.js脚本没有DOM？ [英] How can I run a javascript as a node.js script without the DOM?
问题描述
https://github.com/jasondavies/d3-cloud 是一个词云javascript使用D3库。 这是一个互动演示。演示使用d3-cloud脚本在HTML中生成SVG。
我想在服务器端使用它，并得到node.js生成一个SVG文件，并将其保存到磁盘，每当我更新我的数据，而不是将D3库加载到浏览器并呈现在那里。有没有办法做到这一点？我可以使用看起来依赖于没有DOM的HTML DOM的库吗？
我是node.js的新用户
我使用了 TheHippo的建议，并使用了 PhantomJS ，我创建了一个JS -
svggen.js： / em>
var page = require（'webpage'）create（），wordcloud.html：
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（）;
}）;
<！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， ，想要，更多，单词，
比，this]。map（function（d）{
return {text：d，size：10 + 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 ，translate（150,150））
.selectAll（text）
.data（words）
.enter（）。append（text）
.style （font-size，function（d）{return d.size +px;}）
.style（font-family，Impact）
.style ，function（d，i）{return fill（i）;}）
.attr（text-anchor，middle）
.attr b $ b returntranslate（+ [dx，dy] +）rotate（+ d.rotate +）;;
}）
.text（function（d）{return d。 text;}）;
}
< / script>
< / body>< / html>
然后我运行
phantomjs svggen.js> svgFile.svg
生成的svgFile.svg是一个独立的SVG文件。对于d3cloud检查此。
https://github.com/jasondavies/d3-cloud is a word cloud in javascript using D3 library. This is an interactive demo. The demo used the d3-cloud script to generate an SVG in the HTML.
I would like to use this on the server side and get node.js to generate me an SVG file and save it to the disk whenever I update my data instead of loading the D3 library to the browser and rendering it there. Is there a way to do this? Can I use libraries that seem to rely on the HTML DOM without the DOM?
I am new to node.js
解决方案I took TheHippo's suggestion and used PhantomJS, I created a 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(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function(d) { return d.text; }); } </script> </body></html>Then I run
phantomjs svggen.js > svgFile.svgThe resulting svgFile.svg is a standalone SVG File. For d3cloud check this.
这篇关于如何运行一个javascript作为node.js脚本没有DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
