Wenn mit canvg den Warenkorb Etikettendruck sind hinter dem Diagramm

Question

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

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

Eine andere Ansicht, einfacher, das Problem zu sehen. http://jsfiddle.net/46bv10db/5/

Im obigen Beispiel können Sie sehen, wo sich die Beschriftungen rechts hinter dem Diagramm in der PNG-Datei befinden. Das ursprüngliche Diagramm hat diese Bezeichnungen auf der rechten Seite. Grundsätzlich gibt es zwei konzeptionelle Probleme. Der erste ist, dass der Warenkorb im Ausdruck zu groß ist (PNG-Datei). Die zweite ist, dass die Etiketten dahinter sind. Ich würde es vorziehen, das Diagramm sixe zu reparieren, aber ich kann damit leben, die Etiketten wenigstens vor zu setzen.

Irgendwelche Vorschläge, danke.

Answer 1

Die Ausgabe war von einem D3-Diagramm. Ich änderte die attr-Funktion beim Erstellen der Etiketten von x, y, Breite, Höhe zu Matrix. Die PNG-Datei ist jetzt korrekt. Beachte die auskommentierte Zeile, die ich entfernt habe.

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]);