Question

我是NVD3的新手。我在nvd3中创建了一个折线图。我没有在折线图中将数据中的area属性设置为'true'。但是，当我将折线图导出到PNG时，折线图显示PNG中的阴影区域，而实际折线图可视化中没有阴影区域。我试图在折线图中使用“area：false”，但它在实际的折线图中反过来显示阴影区域。另外，深色背景显示在实际可视化中不存在，我相信因为这个没有轴/线可见。如何在折线图的导出PNG中更正此问题。如何摆脱折线图可视化导出的PNG中的阴影区域？实际的可视化看起来像这样：下载的PNG看起来像这样我目前的代码是：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
        <script src="../build/nv.d3.js"></script>


        <style>
            text {
                font: 12px sans-serif;
            }
            svg {
                display: block;
            }
            html, body, #chart1, svg {
                margin: 0px;
                padding: 0px;
                height: 100%;
                width: 100%;
            }

            .dashed {
                stroke-dasharray: 5,5;
            }
        </style>
         <script type="text/javascript">

        function download()
        {


    img = new Image(),
            serializer = new XMLSerializer(),
            svgStr = serializer.serializeToString(document.getElementById('svg'));

        img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);

        // You could also use the actual string without base64 encoding it:
        //img.src = "data:image/svg+xml;utf8," + svgStr;

        var canvas = document.createElement("canvas");

        var w=3000;
        var h=3000;

        canvas.width = w;
        canvas.height = h;
        canvas.getContext("2d").drawImage(img,0,0,w,h);

        var imgURL = canvas.toDataURL("image/png");
        var dlLink = document.createElement('a');
        dlLink.download = "image";
        dlLink.href = imgURL;
        dlLink.dataset.downloadurl = ["image/png", dlLink.download, dlLink.href].join(':');

        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);



        }

        </script>
    </head>
    <body >

    <div id="chart1" width="100%" height='100%'></div>
    <button onclick="download()">Download</button>

    <script>


    var data = [{"color":"#a215af","key":"products","values":[
        {"y":0,"x":0},
        {"y":0,"x":1},
        {"y":1,"x":2},
        {"y":6,"x":3},
        {"y":2,"x":4},
        {"y":0,"x":5},
        {"y":13,"x":6}]}] 

    nv.addGraph(function() {
            chart = nv.models.lineChart()
                .options({
                    transitionDuration: 300,
                    useInteractiveGuideline: true
                })
            ;;

      var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

      chart.xAxis
        .rotateLabels(-45)
        .tickValues([0, 1, 2, 3, 4, 5, 6])
        .tickFormat(function(d){
          return days[d]
        });


     chart.yAxis
                .axisLabel('Voltage (v)')
                .tickFormat(function(d) {
                    if (d == null) {
                        return 'N/A';
                    }
                    return d3.format(',.2f')(d);
                });


     d3.select('#chart1').append('svg')
                .datum(data)
                .attr("id","svg")
                .attr("height","1000")
                .attr("width","1000")
                .call(chart);

      nv.utils.windowResize(chart.update);

      return chart;
    });



    </script>
    </body>
    </html>

Answer 1

似乎D3在导出到画布时无法渲染外部样式。所以在下载之前提供内联样式。

在你的情况下，在使用document.getElementById访问SVG元素之前添加这些代码行（＆＃34; svg＆＃34;）;

d3.selectAll(".c3-axis path").style({ 'fill':'none', 'stroke': '#000' });
d3.selectAll(".c3-chart path").style({ 'fill':'none'});
d3.selectAll(".c3 line").style({ 'fill':'none'});

默认情况下，D3在外部CSS中设置样式 fill：＆＃39; none＆＃39; ，但在导出svg元素时，您必须手动提供内联，如上所示。

参考 http://codingquestion.blogspot.com/2016/06/exporting-c3js-line-charts-to-png.html

Answer 2

来自html2canvas FAQ我们知道它无法正确处理svg。

我有非常相似的要求和＆＃34; example of how to export a png directly from an svg＆＃34;解决了我的问题（内部采用了svg-crowbar代码）。基本上，你需要将svg绘制到画布然后将图像导出到png，并且＆＃34;显式设置css样式＆＃34;对于所有svg元素，需要注意使导出的图像像原始图像一样 - 这是您遇到的问题。

将NVD3折线图导出到PNG时不需要的阴影区域

2 个答案: