将 NVD3 折线图导出为 PNG 时出现不需要的阴影区域答案

【问题标题】：Undesired shaded area when exporting NVD3 line chart to PNG将 NVD3 折线图导出为 PNG 时出现不需要的阴影区域
【发布时间】：2016-06-02 04:06:07
【问题描述】：

我是 NVD3 的新手。我在 nvd3 中创建了一个折线图。我没有在折线图中将数据中的 area 属性设置为“true”。但是，当我将折线图导出为 PNG 时，折线图在 PNG 中显示了一个阴影区域，而在实际的折线图可视化中没有阴影区域.我尝试在折线图使用的数据中放入“区域：假”，但它在实际折线图中工作并显示阴影区域。此外，在实际可视化中不存在深色背景，我相信因此没有轴/线可见。如何在折线图的导出 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>

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

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

在您的情况下，在使用 document.getElementById("svg"); 访问 SVG 元素之前添加这些代码行；

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:'none'，但在导出 svg 元素时，您必须手动提供内联样式，如上所示。

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

【讨论】：

【解决方案2】：

从 html2canvas FAQ 我们知道它不能正确处理 svg。

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

【讨论】：