How can I run a javascript as a node.js script without the DOM?

问题

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

回答1:

Check out jsdom. You can get access to a window context which you can then perform your d3 operations. Then use node file to save it to a filesystem

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

回答2:

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.

回答3:

You don't need phantomjs if you are just rendering a svg with d3.js

You could run d3 directly in 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(" + [d.x, d.y] + ")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

回答4:

You can create a DOM without a document by creating a document fragment. Once you have that, you can append a root <svg> element to it, then pass that node to d3.select(node). From there on, the rest of d3 methods should work as normal.

来源：https://stackoverflow.com/questions/21786736/how-can-i-run-a-javascript-as-a-node-js-script-without-the-dom

标签

javascript

node.js

svg

d3.js