search

premasagar / pablo

Pablo is a lightweight, expressive JavaScript SVG library. Pablo creates interactive drawings with SVG (Scalable Vector Graphics), giving access to all of SVG's granularity and power.
https://pablojs.com
MIT License
413 stars 16 forks source link

Use pablo to download a D3.js chart #97

Open dang2906 opened 8 years ago

dang2906 commented 8 years ago

Hi,

I have multiple d3 charts and would like to download these as an image file. Is this possible with pablo? if so, how would i go about it correctly?

Many Thanks :)

dang2906 commented 8 years ago

When i attempt it like:

function saveChart(placeholderid) { var chart = $('#' + placeholderid); Pablo(chart).download('png', placeholderid+'.png', function(result){ alert(result.error ? "Fail" : "Success"); }) };

i get the console error:

Object doesn't support property or method 'getBBox' from Pablo.js line 1453,25.

This also happens when i try the selection using d3.select

premasagar commented 8 years ago

Thanks for your report, @dang2906. I tried to replicate this, but I don't get the error you see.

I am guessing that the most likely cause is the placeholder element you are using is an HTML element and not the root SVG element. Could you confirm?

Otherwise, it suggests that your browser doesn't support the SVG DOM method getBBox. What browser and browser version are you using? Does it pass the tests at http://pablojs.com/tests/ ?

If so, could you supply a minimal script / image that you see this problem with?

One simplification you can make is to avoid using jQuery - I presume that is the $() function. You can directly call Pablo('#my-element') or use any other selector.

premasagar commented 8 years ago

Would it be desirable and intuitive that calling Pablo(someHTMLElement).download() should download all SVG root elements within the HTML element?

leoschet commented 8 years ago

Using Pablo I was only able to download the SVG when I called Pablo(svgElement).download() I have a div element and embedded the svg element with Pablo(divElement).load('/path/to.svg') but isn't possible to download it calling the download method from Pablo(divElement).

When I try to do it I get the same console error:

Object doesn't support property or method 'getBBox' from Pablo.js line 1453,25.

answering @premasagar 's question, it would be intuitive!

Edit: My browser gets 100% at http://pablojs.com/tests/

premasagar commented 8 years ago

Yes, only SVG elements can be downloaded in the current implementation. Doing this should work though: Pablo(divElement).load('/path/to.svg', function (image) {image.download()})