D3 Examples - SVG download module

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin:  0px;
}
#chart {
    width: 960px;
    height: 400px;    
}
.bg {
    fill:white;
}
.bar {
    fill:skyblue;
}
.axisLayer .axis .domain {
    stroke: #333333;
}
.axisLayer .tick line {
    stroke: #333333;
    stroke-width: 1px;
}
.axisLayer .tick text {
    fill: #333333;
    font-size: 14px;
    letter-spacing: .05em;
}
.axisLayer .label {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .05em;
}
​
.backgroundLayer .grid line {
    stroke: #cccccc;
    stroke-dasharray: 3,3;
}
.backgroundLayer .grid .domain {
    stroke: none;
}
</style>
</head>
​
<body>
    <button id="update">updarte</button>  
    <div id="chart"></div>
    <button id="downloadSVG">SVG Download</button>  
    <button id="downloadPNG">PNG Download</button>  
​
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>     
<script src="//bl.ocks.org/shimizu/0b526eab82263c8443108c33e454d221/nchart.js"></script>
<script src="createDownloader.js"></script>
<script>
!(function(){
    "use strict"
​
    var data = generateData()
    
    var BarChart = nChart.createVStackBarChart()
        .baseMargin({top:20, left:0, bottom:20, right:0})
        .plotMargin({top:20, left:100, bottom:20, right:100})
        .x(function(d){ return d["年"] })
        .s(function(d){ return d["国名"] })
        .y(function(d){ return d["値"] })
​
​
    var Axis = nChart.createAxis()
        .yAxisGridVisible(true)    
​
    var downloader = createDownloader()        
​
    var selector = d3.selectAll("#chart")
        .datum(data)
        .call(BarChart)
        .call(Axis)
        .call(downloader)
​
    d3.select("#update").on("click", function(){
        selector.update(generateData())
    })          
​
    d3.select("#downloadSVG").on("click", selector.downloadSVG )    
    d3.select("#downloadPNG").on("click", selector.downloadPNG )        
​
    
    function generateData(){
        return Array.prototype.concat.apply([], ["日本", "アメリカ", "フランス"].map(function(country){
            var array  = [2001,2002,2003,2004].map(function(year){
                var value = ~~(Math.random() * 100)
                return {"国名":country, "年":year, "値":value}                
            })
            return array
        }))   
    }    
​
    
}());
    
​
</script>    
</body>
</html>
    