sepeti etiketleri canvg ile baskı, grafik

Question

http://jsfiddle.net/jjhii/46bv10db/1/

<canvas id="canvas" width="800px" height="600px">data</canvas> 
canvg(document.getElementById('canvas'), svg); 

Başka bir görüşe göre arkasında sorunu görmek kolaydır. http://jsfiddle.net/46bv10db/5/

Yukarıdaki örnekte, sağdaki etiketlerin PNG dosyasındaki grafiğin arkasında nerede olduğunu görebilirsiniz. Orijinal grafikte bu etiketler sağda bulunur. Temel olarak kavramda iki problem vardır. Birincisi, sepetin baskıda çok geniş olmasıdır (PNG dosyası). İkincisi, etiketlerin arkasında. Grafiği altını düzeltmeyi tercih ederim ama en azından etiketlerin önüne koyuyorum.

Herhangi bir öneri, teşekkürler.

Answer 1

Çıktı D3 grafiğinden geliyordu. X, y, width, height'dan matrix'e etiketler oluştururken attr işlevini değiştirdim. PNG dosyası şimdi doğru. Yorumlanan çıkış satırını kaldırdığımı not alın.

var x = (width + 5).toString(); 
    var y1 = ((height/4) + (30 * i) + 5).toString(); 
    var y2 = ((height/4) + (30 * i)).toString(); 

    focus.append("svg:text") 
     //.attr("dx", x) 
     //.attr("dy", y2) 
     //.attr("width", "100") 
     //.attr("height", "10") 
     //.attr("class", "rightLabel") 
     //.attr("text-anchor", "left") 
     .attr("transform", "matrix(1, 0, 0, 1, " + x + ", " + y2 + ")") 
     .attr("font-family", "ArialMT") 
     .attr("font-size", "12") 
     .text(rightText[i]);