2
NVD3を初めて使用しています。私はnvd3で折れ線グラフを作成しました。線グラフをPNGにエクスポートすると、線グラフはPNGの影付き領域を表示しますが、実際の折れ線グラフの可視化では影付き領域はありません私は線図で使用されるデータに "area：false"を入れてみましたが、実際の線グラフには影のある領域が表示されていました。また、実際の視覚化には存在しない暗い背景が表示されています。軸/線は表示されません。折れ線グラフのエクスポートされたPNGでこれを修正する方法。折れ線グラフの可視化のエクスポートされたPNGでこの陰影領域を取り除く方法は？ 実際の可視化は、次のようになります。 
をダウンロードしたPNGは、私の現在のコードは、この 
次のようになります。NVD3折れ線グラフを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>