Download a D3 visualization in Chrome
index.html#
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
#line{
width: 700px;
margin: 20px 0;
height: 300px;
background: #eee;
}
button {
margin: 20px 0 0 20px;
}
</style>
</head>
<body>
<a id="download" href="#">Download SVG</button>
<div id="line"></div>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
<script type="text/javascript">
var w = 700;
var h = 300;
var svg = d3.select("#line")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("id", "visualization")
.attr("xmlns", "http://www.w3.org/2000/svg");
var data = d3.range(11).map(function(){return Math.random()*10})
var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
var y = d3.scale.linear().domain([0, 10]).range([10, 290]);
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d,i) {return x(i);})
.y(function(d) {return y(d);})
var background = svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", w)
.attr("height", h)
var path = svg.append("path")
.attr("d", line(data))
.attr("stroke", "steelblue")
.attr("stroke-width", "1")
.attr("fill", "none");
d3.select("#download").on("click", function(){
d3.select(this)
.attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select("#line").html()))
.attr("download", "viz.svg")
})
</script>
</body>
</html>
댓글 없음:
댓글 쓰기