Symfoware

Node.js + d3 + jsdomを使用し、サーバー側でsvgを生成

Node.jsとd3を使用して、サーバーサイドでsvgを作成してみます。

環境は
Node.js：v8.11.1
d3：5.0.0
jsdom：11.7.0

モジュールのインストール

d3本体と、仮想domを提供してくれるjsdomをインストールします。



[email protected]
[email protected]
がそれぞれインストールできました。

サンプル

こちらを参考にしたのですが動作せず。
サーバ側でd3を使って作ったsvgを画像に変換して返す

どうやら、jsdomの仕様が変わったようです。
D3.js + jsdomでSVGファイルを作成 & pngに変換

jsdomオリジナルのドキュメントも参考にしながらプログラムを記載してみます。
https://github.com/jsdom/jsdom


・sample.js

const d3 = require('d3')
const { JSDOM } = require('jsdom')
const document = new JSDOM().window.document
const body = d3.select(document.body)
 .append('svg')
 .attr('width', 300)
 .attr('height', 300)
 .append('circle')
 .attr('cx', 150)
 .attr('cy', 150)
 .attr('r', 100)
 .attr('fill', '#ff0000')
console.log(document.body.innerHTML)

実行結果をファイルにリダイレクト




こんな感じのsvgファイルが出力できました。

<svg width="300" height="300"><circle cx="150" cy="150" r="100" fill="#ff0000"></circle></svg>

【参考URL】

サーバ側でd3を使って作ったsvgを画像に変換して返す
D3.js + jsdomでSVGファイルを作成 & pngに変換
https://github.com/jsdom/jsdom

関連記事

• Ubuntu 18.04 に OpenJDK 11をインストール
• Node.js + d3 超初心者向けのチュートリアル
• Node.js + d3 + jsdomを使用し、サーバー側でsvgを生成
• Node.jsからPostgreSQLに接続する(node-postgres)
• Node.js CSVファイルを行ごとに読み込む(fs + readline)