我如何运行一个JavaScript作为node.js脚本没有DOM?

https://github.com/jasondavies/d3-cloud是使用D3库的javascript中的词云。 这是一个交互式演示 。 演示使用d3-cloud脚本在HTML中生成SVG。

我想在服务器端使用它,并获取node.js生成一个SVG文件,并将其保存到磁盘,只要我更新我的数据,而不是将D3库加载到浏览器并呈现在那里。 有没有办法做到这一点? 我可以使用似乎依赖HTML DOM而不使用DOM的库吗?

我是node.js的新手

看看jsdom 。 你可以访问一个窗口上下文,然后你可以执行你的D3操作。 然后使用节点文件将其保存到文件系统

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

我拿了TheHippo的build议和PhantomJS ,我创build了一个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> 

然后我跑

 phantomjs svggen.js > svgFile.svg 

生成的svgFile.svg是一个独立的SVG文件。 对于d3cloud检查这一点 。

如果你只是用d3.js渲染一个svg,你不需要phantomjs

你可以直接在node.js中运行d3

 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 

您可以通过创build文档片段来创build不带文档的DOM。 一旦你有了,你可以追加一个根<svg>元素,然后将该节点传递给d3.select(node) 。 从那里开始,d3方法的其余部分应该正常工作。