0

I'm trying to generate an image from a graph built in c3.js The code I have generates an image from an svg element. I'm basing myself on this code,but I modified the code to not download the image, only to generate the base64 of the image.:

http://bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177

Everything works but the result is not as expected.

enter image description here

My final conclusion is that the css classes defined in file c3.css are omitted. I tested with a code that does not use c3.js, this svg element only depends on its own styles,this works good!:

http://plnkr.co/edit/pFjNgPVsJdw6Mm9gixBA?p=preview

To check my theory, just comment on the css code that uses c3.js and the graph will look the same as when it is generated. Maybe if I can add the css code directly to the tag style of the element svg this could work. It is an assumption, if someone wants to try something else or get it to work, I will be very grateful.

This is my code with my problem:

http://plnkr.co/edit/FUSyckmj0mK1mq4Gp2Zo?p=preview

 //element svg
 var svgString = getSVGString(d3.select("#chart svg").node()); 

 //generating image, the output is a base64 that will be the src of my img tag
 svgString2Image( svgString, 800, 600, 'png' ); 

 //show base64
 console.log(svgString2Image( svgString, 800, 600, 'png' ))
yavg
  • 2,761
  • 7
  • 45
  • 115
  • Yes you need to append your styles in the svg document itself. Since the `` tag that your `svgString2Image` probably uses is unable to load any external resources, you would have to either append all the CSSRules inside an [SVGStyle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style) element, either to include an ` – Kaiido Oct 16 '17 at 07:03
  • @Kaiido Thanks for replying but I have no idea how to do what you say. – yavg Oct 16 '17 at 07:07
  • Read the duplicate and all the links in both question and answer. – Kaiido Oct 16 '17 at 07:07
  • 1
    @Kaiido I'm reading them. thanks – yavg Oct 16 '17 at 07:08
  • @Kaiido I am not clear the solution, but I see that you know a little more of the subject, please could you help me to apply this in my plunk? – yavg Oct 16 '17 at 07:10
  • sorry I got rushed by th ework, and won't have time to help you out today... Basically, you are facing an other problem: c3's cssRules are like `.c3 svg`, but your standalone svg doc won't be wrappe in the `.c3` container anymore, so your own `getStyle` or my fast implementation linked in dupe won't work either. To make it work, you'd have to be cleverer (i.e test each rule on each element and modify it so that it matches even in standalone), or to do a brute force `elems.forEach(e=>{s=getComputedStyle(e); for(let i=0; i – Kaiido Oct 16 '17 at 08:37
  • @Kaiido I appreciate your kindness but seriously I'm not sure where I should put this, I'm confused. – yavg Oct 16 '17 at 11:39
  • @Kaiido I should do something like this? https://i.imgur.com/0E2ed6g.jpg – yavg Oct 16 '17 at 11:50
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156824/discussion-between-yavg-and-kaiido). – yavg Oct 16 '17 at 11:52
  • @Kaiido I have done the answer of that subject. I used that same response to generate an image from a c3.js chart and it did not work. Can you please help me with my problem? I see you're one step closer to me and I do not understand how to do it – yavg Oct 17 '17 at 04:30

0 Answers0