Pie chart pre-error check server with D3.js in svg format
I am using a D3.js
drawing library pie chart
.
To create the diagram, I use the prerendering server command (NodeJs) with gulp and the npm module jsdom
and then save the HTML file. And it works.
// 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
But I need to save in SVG format
and then use these functions to convert HTML to XML for 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 modules: vkbeautify , xmlserializer )
I have already done this with multiple graphs without any problems other than the pie chart: HTML is perfect, but SVG does not render well.
Outputs:
What could be the reason? How can I fix it?
source to share
This is a lower / upper case problem. Somewhere in your code, you should omit all of this. As a result, the path descriptor in your view looks like this:
m6.123031769111886e-15,-100a100,100 0 1,1 -3.8285889215894375e-14,100l0,0z
whereas for it to work properly you need
M-95.10565162951534,-30.901699437494813A100,100 0 0,1 7.044813998280223e-14,-100L0,0Z
In SVG, there is a big difference between the two (lowercase values are "relative to last position", uppercase means "absolute coordinates").
source to share