给定一个 D3js 代码，such as :
var square= 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");
}
square();svg { border: 1px solid grey;} /* just to visualized the svg file's area */<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body></body>如何使用我的 D3js 代码和 NodeJS 生成正确的独立 *.svg 文件？
最佳答案
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。使用 Node Packages Manager (2) 安装 jsdom:
$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，然后将其注入(inject)到 test.svg 文件中。任务完成。
正如 Gilly 在评论中指出的那样，您可能需要 jsdom 版本 3 才能使其工作。
关于node.js - D3js : how to generate standalone SVG files? (Nodejs)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19080929/