search

dc-js / dc.js

Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js
Apache License 2.0
7.42k stars 1.8k forks source link

Exporting svg elements produced by dc.js #684

Open amergin opened 10 years ago

amergin commented 10 years ago

I would be interested to know any tips or current solutions on how to reliably export DC.js charts regardless of the chart type. My own stabs at exporting have more or less failed: after exporting the svg with inline css applied, the result looks very much different than the original chart.

gordonwoodhull commented 9 years ago

Although this is really a general browser problem (and there is a lot of discussion on the d3 mailing list about different methods), it would be nice to have a built-in feature for it, or at least a pointer to a method or library on the FAQ.

Here is a demonstration of one technique: http://d3export.housegordon.org/

gordonwoodhull commented 9 years ago

Related: #671 export as image (png)

gordonwoodhull commented 9 years ago

Here's a fairly comprehensive SO answer. (I haven't tried it yet.)

http://stackoverflow.com/questions/23218174/how-do-i-save-export-an-svg-file-after-creating-an-svg-with-d3-js-ie-safari-an

amergin commented 9 years ago

My problems are related to styling of the SVG elements produced by dc.js. Whenever I get an svg file out, it's crearly missing the custom css styles in dc.css, even when supplied external stylings with CDATA. The most impressive implementation I've seen is http://nytimes.github.io/svg-crowbar/.

EDIT: seems they've released a new version, SVG crowbar 2, which seems to style DC.js figures properly - I need to take a look at the implementation.

amergin commented 9 years ago

Now revisiting this problem, the issue is not anymore about how to get the serialized svg string out embedded with the relevant css rules; Svg-crowbar2 functions are wonderful for that.

The new problem: the output svg file renders differently in browsers and viewers like Inkscape. Consider this example file from the dc.js, with proper headers the file can be viewed here.

Chrome: axes visible, main content hidden Firefox: axes and main content visible Safari: axes and main content visible Inkscape: axes and main content visible.

I'm thinking the file contains some piece of inline css that is interpreted differently on these viewers. For instance I remember reading that Inkscape does not have very sophisticated SVG support for some pieces of the newer standard.

Any ideas?

amergin commented 9 years ago

Asked this same question in Stack overflow and got an explanation.

As the height and width styles are set on export by Crowbar, it seems to be a bug on their part.