При печати с canvg телеге этикетки позади диаграммы

Question

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

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

Другой вид, легче увидеть проблему. http://jsfiddle.net/46bv10db/5/

В приведенном выше примере вы можете увидеть, где метки справа находятся за диаграммой в PNG-файле. В исходной диаграмме эти метки справа. В принципе в концепции есть две проблемы. Во-первых, в распечатке слишком большая тележка (PNG-файл). Второй - это метки. Я предпочел бы исправить диаграмму sixe, но я могу жить, по крайней мере, с нанесением надписей.

Любые предложения, спасибо.

Answer 1

Выход был из графика D3. Я изменил функцию attr при создании меток от x, y, width, height до matrix. Теперь файл PNG корректен. Обратите внимание, что прокомментированная строка - это то, что я удалил.

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