How to download SVG graph as a JPEG file?
34 views
Skip to first unread message
Raymond Cui
May 15, 2018, 12:51:30 AM5/15/18
to d3-js
As a new beginner, how could we download the SVG graph as a JPEG file?
The example code is shown as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>D3 Tutorial</title>
<script src="http://d3js.org/d3.v3.min.js"> </script>
</head>
<body>
<script>
var dataArray = [5,20,40,50,60];
var width = 500;
var height = 500;
var widthscale = d3.scale.linear()
.domain([0,60])
.range([0,width]);
var color = d3.scale.linear()
.domain([0,60])
.range(["yellow", "red"])
var canvas = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("width",function(d){ return widthscale(d);})
.attr("height", 50)
.attr("fill", function(d){ return color(d)})
.attr("y", function(d, i){return i*100});
</script>
<!- console.log(color)>;
</body>
</html>
Many thanks!
Raymond
Malik Koné
May 15, 2018, 6:52:35 PM5/15/18
to d3-js
Raymond Cui
May 16, 2018, 8:50:30 PM5/16/18
to d3-js
Hi Malik,
Thank you very much, mate!
For the second option, to save SVG as PNG, where should I add the codes? The HTML file or create a new js file? What is DOM.download, is it a library?
Kind regards,
Raymond
Reply all
Reply to author
Forward
0 new messages