Save d3.js charts and keep the css styles
1,278 views
Skip to first unread message
Conor
Jun 27, 2013, 5:26:57 AM6/27/13
to d3...@googlegroups.com
Hello All,
I need to provide users with the option to download and save d3.js charts.
At the moment I'm saving the svg to a canvas element and displaying the image to the user. However there are some problems with this approach. Mainly the css is not being rendered on the canvas element.
Is there a method to save d3.js charts as an image (any format) and keep the css stylings? I've had a look at the example at http://bl.ocks.org/biovisualize/1209499 but it doesn't seem to work on firefox (tested on Windows and Ubuntu).
Thanks
I need to provide users with the option to download and save d3.js charts.
At the moment I'm saving the svg to a canvas element and displaying the image to the user. However there are some problems with this approach. Mainly the css is not being rendered on the canvas element.
Is there a method to save d3.js charts as an image (any format) and keep the css stylings? I've had a look at the example at http://bl.ocks.org/biovisualize/1209499 but it doesn't seem to work on firefox (tested on Windows and Ubuntu).
Thanks
Enrico Spinielli
Jun 27, 2013, 7:00:18 AM6/27/13
to d3...@googlegroups.com
phantomjs allows to screen capture
--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
Scott Murray
Jun 27, 2013, 12:57:23 PM6/27/13
to d3...@googlegroups.com
Major Tom
Jun 27, 2013, 2:01:47 PM6/27/13
to d3...@googlegroups.com
Is there any way to integrate SVG Crowbar into the webpage? Or does this only exist as a bookmarklet?
Scott Murray
Jun 27, 2013, 2:24:26 PM6/27/13
to d3...@googlegroups.com
There's no automatic, built-in way, but since the source is all there, presumably you could include it in your page and trigger it programmatically.
Scott
Scott
Nate Vack
Jun 27, 2013, 2:26:24 PM6/27/13
to d3...@googlegroups.com
If you're planning to have your image as a downloadable SVG file, you
might consider using inline CSS.
Yes, I know it makes babies cry; however, it makes packaging an
illustration (and, later, editing it in Adobe Illustrator) much
easier.
-n
On Thu, Jun 27, 2013 at 1:24 PM, Scott Murray <s...@alignedleft.com> wrote:
> There's no automatic, built-in way, but since the source is all there, presumably you could include it in your page and trigger it programmatically.
>
> Scott
>
might consider using inline CSS.
Yes, I know it makes babies cry; however, it makes packaging an
illustration (and, later, editing it in Adobe Illustrator) much
easier.
-n
On Thu, Jun 27, 2013 at 1:24 PM, Scott Murray <s...@alignedleft.com> wrote:
> There's no automatic, built-in way, but since the source is all there, presumably you could include it in your page and trigger it programmatically.
>
> Scott
>
Christophe Viau
Jun 27, 2013, 3:17:46 PM6/27/13
to d3...@googlegroups.com
Inlining styles is not bad practices. There must be a reason why
google.com inlines all its css.
Have you tried adding a style attributes inside the SVG? It works for
styling, but I would be curious to know if it works with client-side
conversion.
svg.append('style').attr({type: 'text/css', media: 'screen'})
.text('text{font-size: '10px;} line{stroke: grey}');
Chris
google.com inlines all its css.
Have you tried adding a style attributes inside the SVG? It works for
styling, but I would be curious to know if it works with client-side
conversion.
svg.append('style').attr({type: 'text/css', media: 'screen'})
.text('text{font-size: '10px;} line{stroke: grey}');
Chris
Frank Guerino
Jun 27, 2013, 6:53:24 PM6/27/13
to d3...@googlegroups.com
Hi,
When we say "inline" are we talking about "<p style="..."> or does "In Page" (defining all styles in the HTML <head> section) styling count? We use In Page and it's a very nice way to deal with things but I don't know if In Page would allow the SVG to be saved with all styling.
Thoughts?
Frank
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
Maggie Lee
Aug 19, 2013, 11:54:14 AM8/19/13
to d3...@googlegroups.com
I wanted to bump this up with a similar question ... AI vs. Inkscape
I'm designing a poster (ie, it doesn't matter that it's big and slow to load)
I've got my basic shape in d3.js! http://bl.ocks.org/greencracker/raw/6250717/
And (thanks SVG Crowbar), I've got an svg.
Of course I need to add many things and make adjustments, like, fiddle nearly all the text, add a key etc. (youll see if you look at the graph)
When I open in AI CS5 15.1.0, it displays, oh, about 1/10 of the paths and none of the nodes or text.
In Inkscape, it opens everything.
I'm not a graphic designer, Lord knows. I've _heard_ of Adobe, and it costs money, so I thought it would be a better product than inkscape.
What do you think?
(PS, any input on design of poster is very welcome. Eventually it will be printed on as big of paper as I need.)
On Thursday, June 27, 2013 6:53:24 PM UTC-4, Guerino1 wrote:
Hi,When we say "inline" are we talking about "<p style="..."> or does "In Page" (defining all styles in the HTML <head> section) styling count? We use In Page and it's a very nice way to deal with things but I don't know if In Page would allow the SVG to be saved with all styling.Thoughts?Frank
On Thu, Jun 27, 2013 at 3:17 PM, Christophe Viau <christo...@gmail.com> wrote:
Inlining styles is not bad practices. There must be a reason why google.com inlines all its css.
Have you tried adding a style attributes inside the SVG? It works for styling, but I would be curious to know if it works with client-side conversion.
svg.append('style').attr({type: 'text/css', media: 'screen'})
.text('text{font-size: '10px;} line{stroke: grey}');
Chris
On 6/27/13 11:26 AM, Nate Vack wrote:
If you're planning to have your image as a downloadable SVG file, you
might consider using inline CSS.
Yes, I know it makes babies cry; however, it makes packaging an
illustration (and, later, editing it in Adobe Illustrator) much
easier.
-n
On Thu, Jun 27, 2013 at 1:24 PM, Scott Murray <s...@alignedleft.com> wrote:
There's no automatic, built-in way, but since the source is all there, presumably you could include it in your page and trigger it programmatically.
Scott
--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
Maggie Lee
Aug 19, 2013, 12:02:54 PM8/19/13
to d3...@googlegroups.com
PS, changing to inline css might indeed make me cry
Ian Johnson
Aug 26, 2013, 4:07:59 PM8/26/13
to d3...@googlegroups.com
Inkscape is pretty good at following standards and has strong SVG support. SVG became a 2nd class citizen at adobe around 2001, and they are only now taking it seriously again in their web tools (but not necessarily AI).
I think you could accomplish whatever you need from Inkscape, it just doesn't have as polished of a UI or as many people who use it as illustrator.
Ian Johnson - 周彦
Reply all
Reply to author
Forward
0 new messages