D3js: как создавать автономные файлы SVG? (Nodejs)

Учитывая код D3js, например:

function () {
    var svg = window.d3.select("body")
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);

    svg.append("rect")
        .attr("x", 10)
        .attr("y", 10)
        .attr("width", 80)
        .attr("height", 80)
        .style("fill", "orange");
}

Как создать правильный автономный файл *.svg с моим кодом D3js и NodeJS?

Ответы

Ответ 1

Репозиторий Github svgcreator.node.js, чтобы попробовать.

D3 все равно, что на самом деле генерирует ваш SVG. Основная проблема с созданием только SVG заключается в том, что у вас тогда не может быть Javascript, что, конечно же, означает, что вы не можете использовать D3. Помимо этого фундаментального нет-нет, вас ничто не останавливает:)

Доказательство концепции: Вдохновленный другим ответом, здесь приведен некоторый код доказательной концепции с использованием jsdom.

1. Установите NodeJS (1).

curl http://npmjs.org/install.sh | sh       #this should work (not tested)

2. Установите jsdom с помощью Node Packages Manager (2):

$npm install jsdom

3. Оберните свой код D3js в некоторый код jsdom, вставьте в файл jsdom.node.js:

var jsdom = require('jsdom');

jsdom.env(
  "<html><body></body></html>",
  [ 'http://d3js.org/d3.v3.min.js' ],
  function (err, window) {
    var svg = window.d3.select("body")
        .append("svg")
        .attr("width", 100).attr("height", 100);

    svg.append("rect")
        .attr("x", 10)
        .attr("y", 10)
        .attr("width", 80)
        .attr("height", 80)
        .style("fill", "orange");
// PRINT OUT:
    console.log(window.d3.select("body").html());
//  fs.writeFileSync('out.svg', window.d3.select("body").html()); // or this
  }
);

4. Запуск в терминале

$node jsdom.node.js > test.svg

Выход stdout представляет собой SVG, который затем вводится в файл test.svg. Выполнение задания.

Как указывает Гилли в комментариях, вам может понадобиться версия 3 jsdom для этого.

Ответ 2

node.js - путь. Вы можете установить d3 напрямую с помощью npm. (Он также добавит jsdom как зависимость для предоставления "поддельной" DOM.) После того, как код d3 генерирует SVG, просто возьмите его содержимое и напишите в файл.

Ответ 3

Недавно я хотел сделать именно это и задал вопрос здесь. Я указал на phantomJS. Используя PhantomJS, я создал 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>

Затем я запустил

phantomjs svggen.js > svgFile.svg

Полученный файл svgFile.svg является автономным SVG файлом. Для d3cloud проверьте this.

Ответ 4

Здесь очень короткий node script, который выведет svg в stdout, сгенерированный с помощью d3.js.

#!/usr/bin/env node

var d3 = require("d3"),
    jsdom = require("jsdom").jsdom;

var body = d3.select(jsdom().documentElement).select("body");

var svg = body.append("svg");
process.stdout.write(body.node().innerHTML);

Ссылка на фрагмент на bl.ocks.org