2

I'm building an d3.js collapsible tree and used this (http://bl.ocks.org/mbostock/4339083) example for my work. This works great but I also will provide an option to download/export this tree as SVG/PDF/PNG. I searched a long time to handle this issue but it is allways the same result. The resulting SVG/PNG is faulty. To be exact the links between the nodes of the tree are faulty.

I tried these approaches:

ht_tp://jsfiddle.net/plaliberte/HAXyd/

ht_tp://d3export.cancan.cshl.edu/

For better understanding view this picture!

http://de.tinypic.com/r/30auvec/5

Thank you!

user3017615
  • 549
  • 1
  • 5
  • 9
  • For almost all approaches, you need to inline the style rules. In your example, it looks like you would need to set `.style("fill", "none")` for all the links. – Lars Kotthoff Nov 21 '13 at 13:19
  • Thank you for your fast reply but in my browser the tree looks great. Only if I export/download the SVG as SVG or PNG it looks like my first picture (browser view: http://de.tinypic.com/r/2cy1p43/5) – user3017615 Nov 21 '13 at 13:34
  • Have you tried inlining the style rules as I've suggested? – Lars Kotthoff Nov 21 '13 at 13:39
  • You are great!!! I have marked it in the .css but the .css features are not used in the conversion. Thank you very much – user3017615 Nov 21 '13 at 13:56
  • You're welcome. I'll add this as an answer for reference. – Lars Kotthoff Nov 21 '13 at 14:01
  • Ok. Do you know how I can change the background-color of the SVG? When I build my graph I can do this by [code].style("background-color", "white")[/code] but when I download the SVG I got always transparency as background. – user3017615 Nov 21 '13 at 14:15

1 Answers1

6

Most approaches that convert SVG to something else rely on the style information being available in the SVG itself, which is not the case if you're using external CSS. That is, in your case you probably have CSS that looks like this:

path {
  fill: none;
}

This information needs to be attached to the links in this case to make the conversion work. That is, in your code you would need to add something like this.

link.style("fill", "none");

The conversion should work with this.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204