server-side generate d3 svg

背景：最近有需求要经过 nodeJs 在命令行生成 d3.js 生成的svg，百度了一些 headless ，由于咱们前端的页面并无作 SSR ，即便 headless 去截图可能会存在请求数据异步延迟，图不许确的问题，因此决定，用 nodeJs + jsdom + d3.js 虚拟生成 dom 结构，最后 output svg 标签的内容。

解决办法：

1.安装依赖 

d3@4.7.1
jsdom@15.0.0复制代码

2. js 代码 

const d3 = require('d3');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const document = new JSDOM().window.document;
const size = {
  width: 900,
  height: 1200
};
const svg = d3.select(document.body)
              .append('svg')
              .attr("xmlns",'http://www.w3.org/2000/svg')
              .attr('width', size.width)
              .attr('height', size.height)
              .style('background-color', "#363b44");

// 能够按照正常 js 的写法 append 一些元素，例如 g, circle, rect ...

console.log(document.body.innerHTML)复制代码

3.运行 command line

node xxx.js > xxx.svg复制代码

就能够看到当前目录下多了一个 svg 文件！

ps：若是不想手动在命令行输入导出的文件名称，能够直接利用 fs 模块，写入文件

fs.writeFile('./img/xxx.svg', document.body.innerHTML, (err) => {
    if (err) {
      console.log(err);
    }
  })复制代码

BTW， 在这里说一下遇到的一个坑，力导向图计算力的时候，会发现和平时页面里的 script 中打印的 graph.nodes 值不同，研究了两天，最后发现加了一个 setTimeout 得以解决，看来是 nodeJs 默认同步处理，若是遇到 d3 和平时不太同样的效果，不妨加个延时器试试～～

参考连接

力导向图详解