javascript - 使用 svg 格式的 D3.js 预渲染饼图服务器时出错

Question

我正在使用库 D3.js 绘制一个饼图。

This is the code which I'm testing

为了创建图表，我使用预呈现服务器端 (NodeJs) 使用 gulp 和模块 npm jsdom，然后保存 HTML 文件。并且有效。

// HTML SAVING  
// window is the jsdom obj
var innerHTML = window.document.documentElement.innerHTML;
var Parser = require('parse5').Parser,
    parser = new Parser(),
    dom = parser.parse(htmlString);
save(xmlserializer.serializeToString(dom)); // Save file 

但我需要保存为 SVG 格式，然后使用这些函数将 HTML 转换为 XML 以用于 SVG。

    // SVG SAVING
   // window is the jsdom obj
       var body = window.document.querySelector("html");
       var svg = body.getElementsByTagName("svg")[0];
       var svg_xml = xmlserializer.serializeToString(body);
       save(vkbeautify.xml(svg_xml));// Save file 

(npm 模块:vkbeautify，xmlserializer)

我已经用几个图形完成了这个，没有任何问题，除了饼图:HTML 是完美的，但 SVG 呈现得很糟糕。

输出:

可能是什么原因？我该如何解决？

Answer 1

这是一个小写/大写问题。在你的代码中的某个地方，你必须将整个东西小写。因此，输出中的路径描述符如下所示:

m6.123031769111886e-15,-100a100,100 0 1,1 -3.8285889215894375e-14,100l0,0z

而你需要让它正常工作的是

M-95.10565162951534,-30.901699437494813A100,100 0 0,1 7.044813998280223e-14,-100L0,0Z

在 SVG 中，这两者之间有很大的区别(小写表示“相对于最后一个位置”；大写表示“绝对坐标”)。