如何运行一个javascript作为node.js脚本没有DOM？ | 如何运行一个javascript作为node

本文介绍了如何运行一个javascript作为node.js脚本没有DOM？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是一个词云javascript使用D3库。。演示使用d3-cloud脚本在HTML中生成SVG。

我想在服务器端使用它，并得到node.js生成一个SVG文件，并将其保存到磁盘，每当我更新我的数据，而不是将D3库加载到浏览器并呈现在那里。有没有办法做到这一点？我可以使用看起来依赖于没有DOM的HTML DOM的库吗？

我是node.js的新用户

解决方案

我使用了建议，并使用了，我创建了一个JS -

svggen.js： / em>

  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， ，想要，更多，单词，
比，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.svg
The resulting svgFile.svg is a standalone SVG File. For d3cloud check this.
                        这篇关于如何运行一个javascript作为node.js脚本没有DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！