CODEWITHSUNDEEP
javascripthtmlnode.jssvgd3.js
jay
jay

Reputation: 1471

Error prerendering server of a pie chart with D3.js in svg format

I'm using the library D3.js to draw a pie chart.

This is the code which I'm testing

To create the chart I use prerendering server side (NodeJs) using gulp, and the module npm jsdom, 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, 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 several graphics without any problems, except for the pie chart: HTML is perfect, but SVG is rendered badly.

Outputs:

HTML output SVG output

What could be the cause? How can I fix?

Upvotes: 3

Views: 132

Answers (1)

meetamit
meetamit

Reputation: 25157

It's a lower/upper case issue. Somewhere in your code you must be lowercasing the whole thing. As a result, a path descriptor in your output looks like this:

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

whereas what you need for it to work properly is

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

In SVG, there is a big difference between those two (lowercase means "relative to last position"; uppercase means "absolute coordinates).

Upvotes: 2

Related Questions