javascript - 使用 canvg 打印时，购物车标签位于图表后面

Question

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

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

另一个 View ，更容易看到问题。 http://jsfiddle.net/46bv10db/5/

在上面的示例中，您可以看到右侧标签位于 PNG 文件中图表后面的位置。原始图表的右侧有这些标签。基本上，概念上存在两个问题。第一个是打印输出(PNG 文件)中的购物车太宽。第二是标签落后。我更愿意修复图表六，但我可以接受至少将标签放在前面。

任何建议，谢谢。

Answer 1

输出来自 D3 图表。创建从 x、y、宽度、高度到矩阵的标签时，我更改了 attr 函数。 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]);