Question

有没有办法只生成一个svg并将其作为一个字符串而不实际绘制它？我想到将svg渲染到一个隐藏的div然后阅读内部html，但是有更清洁的方法吗？

Answer 1

我认为你可以这样做：

var svg = d3.select("body").append("svg")
svg = d3.select(svg).remove()

将svg附加到正文，但立即将其删除。当然，这将为您提供'd3选择'对象，而不是字符串。

Answer 2

您可以使用createDocumentFragment()在javascript中创建整个其他DOM树。这通常用于创建文档的复杂部分，然后一步将其全部添加到页面中，因此浏览器只需重新计算一次布局。

我还没有对它进行过测试，但您也应该能够使用.innerHTML()将您创建的所有内容解压缩为可以保存到文件的字符串。 this SO Question的答案表明您不能直接在文档片段本身上调用innerHTML()，因此您必须向片段添加一个body元素，将SVG添加到它，然后获取内部来自正文节点的HTML。

Answer 3

解决此问题的一种方法是检查在服务器端如何完成 - 没有DOM。

事实证明，way to do this on the server side或多或少涉及问题中使用的“黑客”。这是因为d3期望在DOM上工作;将DOM写入HTML实际上是将其呈现为字符串的唯一方法。

简要示例：

var svg = window.d3.select('body')
    .append('div').attr('class','container')
    .append('svg'); // and lots of other stuff

//etc etc

svg.selectAll('.arc').doSomething('blah blah'); 

var svgAsString = d3.select('.container').html();

如何使d3.js生成一个svg而不绘制它？

3 个答案: