“保存D3.JS示例”；bullet.html“；到SVG

我正在使用D3.JS站点上的bullet graph示例：

我的目标是将项目符号图本身保存为SVG文件，以便在Inkscape中进行编辑。使用带有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);
    }
});
}

这里有一个指向GIST上存储的“bullet.svg”文件的链接：您可以将该文件保存到本地驱动器，并在浏览器中查看

但是，正如当前存储的一样，此文件不会加载到Inkscape中。我修改了结果文件，添加了一个？xml头，并用xmlns修改了svg元素，同时还手动将各个元素包装到单个块中

我错过了什么？一旦我弄明白了如何手工操作，我就需要修改提取SVG的代码，以便编写标题

修改rasterize.js（如上）以编程方式编写干净的SVG的其他想法或技巧？谢谢

对单个svg元素做得很好，它只是一个书签，您必须添加它（仅适用于chrome）。它是由《纽约时报》开发的

一个特定于Chrome的bookmarklet，用于提取SVG节点和相应的 从HTML文档中选择样式并将其作为SVG文件下载 例如，您可以在Adobe Illustrator中打开和编辑它。 因为SVG是独立于分辨率的，所以它在您需要时非常适合 使用web技术创建用于 印刷品（比如，可能在新闻纸上）。它是在考虑d3.js的情况下创建的， 但无论您选择如何生成SVG，它都应该可以正常工作

---

您也可以使用我刚刚发布的开源库。

这是一个有趣的工作流，我对它没有任何经验（除了d3位），因此没有资格回答，但是。。。。您的bullets.svg不是纯粹的svg，因为它被包装在

中。我希望这会成为Inkscape的一大亮点，不是吗？你试过没有这个div吗？哦，我刚刚注意到有多个SVG（我想这就是为什么你把它们包装在一个div中），我同样认为这对Inkscape来说是个问题。如果是这样，您必须修改mbostock的示例，将它们全部放在单个SVG中的

中。解决此问题的一种可能方法是使用phantomjs将其渲染为PDF，然后将PDF转换为SVG。@lars-PDF建议考虑得不错。我使用PDF输出重新运行代码，并将新文件加载到Inkscape中，没有错误。我仍然希望看到一个本机SVG解决方案，我想我已经投资了。谢谢

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