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 和平時不太同樣的效果，不妨加個延時器試試～～

參考連接

力導向圖詳解