0

I'm utilizing canvg to convert my d3 generated svg graph into different download formats. All of my data is contained in rectangle nodes and wrapped to fit the specified width. In SVG, the text looks perfect with the wrapping code. Here's how the element is setup:

<text text-anchor="middle" alignment-baseline="middle" x="0" opacity="1.5716901593992887">
<tspan x="0" y="-1em" dy="1.25em">regulation</tspan><tspan x="0" y="-1em">GO:0009889</tspan>
<tspan x="0" y="-1em" dy="2.1999999999999997em">of</tspan>
<tspan x="0" y="-1em" dy="3.1499999999999995em">biosynthetic</tspan><tspan x="0" y="-1em" dy="4.1em">process</tspan>
</text>

Again, the text looks perfect on the SVG, but when transformed to canvg, it looks differently:

https://i.stack.imgur.com/SCCAq.jpg (the left being svg, which looks correct and the right being canvas, which doesn't look correct/is downshifted)

How is d3 elements transferred over through canvg that makes it different in the output? If this issue is not fixable, are there other alternatives to convert svg elements into a pdf/png file?

David Ma
  • 59
  • 11
  • Two questions: are you producing these using JSFiddle or something similar? Also, have you tried using both Chrome and Firefox? I was getting similar text issues (bold and too large) when using Firefox with JSFiddle, but it was fine on chrome. When I put it on the actual site, it worked fine with both Chrome and Firefox. If your issue has a similar cause these would be worth looking into. – JSBob Jul 14 '15 at 20:02
  • @JSBob I'm producing it through my actual site on chrome, and both chrome and firefox are giving me the same results. I'm considering selecting each tspan and making the attribute y slightly less (altering it to make the downloadable png/pdf, then altering it back for interactive use after it has been downloaded), but I don't know how to go about doing that. – David Ma Jul 14 '15 at 20:25
  • Assuming you have some sort of button to download, you'd simply have to add to that method something along the lines of: `d3.selectAll("tspan").attr("y", function(d){ return d3.select(this).attr("y") - });`. Afterwards, reverse this by adding the offset to the value. You may also find it useful to apply a class to allow you to select only the elements that need to be moved on exporting. – JSBob Jul 14 '15 at 20:31
  • @JSBob Thanks for the quick response. Yeah I'm pretty new with D3.js and wasn't sure of how to select each tspan ( I knew selectAll was around and I was thinking about ways that I could use (selection).each() command to change the attributes.) I'm pretty sure this will work though. – David Ma Jul 14 '15 at 20:37
  • @JSBob It worked. It's kinda weird because changing the y attribute did not change the spacing between the box and the text but changing dy did. If you want to move your second comment into the answer space I'd happily give you the reputation you deserve. – David Ma Jul 15 '15 at 03:26

0 Answers0