javascript - Undesired shaded area when exporting NVD3 line chart to PNG -
i new nvd3. have created line chart in nvd3. haven't set area attribute in data 'true' in line chart.however when export line chart png,the line chart shows shaded region in png while there no shaded region in actual line chart visualization.i tried putting "area:false" in data used line chart worked reverse , displayed shaded area in actual line chart.also,a dark background dispalyed isn't present in actual visualization , believe because of no axes/lines visible.how correct in exported png of line chart. how rid of shaded area in exported png of line chart visualization? actual visualization looks this: 
downloaded png looks 
current code is:
<!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); // use 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>
it seems d3 can't render external styles while exporting canvas. provide inline styles before downloading.
in case add these lines of code before accessing svg element document.getelementbyid("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'}); by default, d3 sets style fill:'none' in external css while exporting svg element have manually provide in inline shown above.
reference http://codingquestion.blogspot.com/2016/06/exporting-c3js-line-charts-to-png.html
