-2

The PNG image generated by D3 Javascript library is bad, as shown in the picture below: enter image description here

Where as the SVG picture generated by D3 Javascript on HTML page is good, as shown in the picture below: [![enter image description here][2]][2]

Following is the image generated by the d3 library on the html page. [2]: https://i.stack.imgur.com/lPHI2.png

My question is what settings need to be made so that downloaded image is also good(as seen on the html page)

srigu
  • 329
  • 1
  • 5
  • 16
  • How are you generating the PNG from the SVG generated by d3js? – Terry Mar 11 '21 at 13:23
  • I am using the function provided by d3js: ``` d3.select('#download-btn').on('click', function(e){ var svgString = getSVGString(dataTypeSvg.node()); // passes Blob and filesize String to the callback svgString2Image( svgString, 3*width, 3*height, 'png', save ); function save( dataBlob, filesize ){ saveAs( dataBlob, 'dataTypeDataMap.png' ); // FileSaver.js function } }); ``` – srigu Mar 11 '21 at 13:45
  • Does this answer your question? [Save inline SVG as JPEG/PNG/SVG](https://stackoverflow.com/questions/28226677/save-inline-svg-as-jpeg-png-svg) – Robin Mackenzie Mar 11 '21 at 21:53
  • Perhaps you found the code for `getSVGString` and `svgString2Image` in an online d3 demo (e.g. block) - you couuld refer to that in your question ?They are not provided by the library itself. – Robin Mackenzie Mar 11 '21 at 22:14

1 Answers1

0

I am using the functions getSVGString and svgString2Image provided in an online d3 demo. The CSS styles provided by 'link' class were not available to these functions; so I replaced all occurrences of 'link' class in path element with inline styles fill:none. It has worked.

srigu
  • 329
  • 1
  • 5
  • 16