svg - D3.JSの例「bullet.html」をSVGに保存

Question

私はhttp://bl.ocks.org/4061961の D3.JS サイトでブレット グラフの例を使用しています。

私の目標は、Inkscape で編集するために、ブレット グラフ自体を SVG ファイルとして保存することです。phantom.js で rasterize.js の例を使用すると、コードを変更して、ブレット グラフを PNG ファイルに保存し、SVG コードをプログラムで抽出してファイルに保存することができました。以下は、SVG コードを保存する修正済みの rasterize.js ファイルです。

var page = require('webpage').create(), address, output, size;


if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                var results = page.evaluate(function(){
                   return document.getElementById('chart').innerHTML
                })
            console.log(results);
            phantom.exit();
        }, 200);
    }
});
}

上記の JS は「rasterize.js」に保存され、コマンド ラインで phantomjs.exe に渡されて、SVG ファイルと PNG ファイルが作成されます。

> phantomjs.exe rasterize.js bullet.html bullet.png > bullet.svg

GIST に保存されている「bullet.svg」ファイルへのリンクは次のとおりです : https://raw.github.com/gist/4178632/08396404f40210a801ef36aeee526d9f128952a8/bullets.svg .

ただし、現在保存されているため、このファイルは Inkscape に読み込まれません。個々の要素を 1 つのブロックに手動でラップしたため、?xml ヘッダーを追加し、svg 要素を xmlns で修正して、結果のファイルを変更しました。

私は何が欠けていますか？手動で機能させる方法を理解したら、SVG を抽出してヘッダーを書き込むコードを修正する必要があります。

きれいな SVG をプログラムで作成するために rasterize.js (上記) を変更するための他のアイデアやヒントはありますか? ありがとう！