Built with blockbuilder.org
Interview testing 1:
forked from 1Cr18Ni9's block: Brush for data visualisation
forked from Thanaporn-sk's block: Brush for data visualisation
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="TurncatingChart.js"></script>
<link rel="stylesheet" href="style.css" />
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div id="cont1" class="container">
<div class="inner">
<span class="menu">☰</span>
<button class="saveSVG">Save as SVG</button>
<button class="savePNG">Save as PNG</button>
</div>
</div>
<canvas width="960" height="500" style="display:none"></canvas>
<script>
d3.json('data1.json', function(error, rawData){
if(error){ throw error };
var myChart = TurncatingChart();
var opt = rawData.option;
// updata all data according to json
for(var key in opt){
if(myChart[key]) myChart[key](opt[key]);
}
d3.select('#cont1').datum(rawData.data).call(myChart);
})
d3.selectAll(".saveSVG").on("click", svgURI);
d3.selectAll(".savePNG").on("click", pngURI);
function svgURI(){
var svg = d3.select(this.parentNode.parentNode)
.select('svg');
var imgsrc = svgData(svg);
var a = document.createElement("a");
a.download = "sample.svg";
a.href = imgsrc;
document.body.appendChild(a);
a.click();
}
function pngURI(){
var svg = d3.select(this.parentNode.parentNode)
.select('svg');
var imgsrc = svgData(svg);
var img = '<img src="'+ imgsrc +'">';
// a canvas tag to be predefined in HTML
var canvas = document.querySelector("canvas")
canvas.width = svg.attr('width');
canvas.height = svg.attr('height');
var context = canvas.getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);
var canvasdata = canvas.toDataURL("image/png");
// append a link tag then remove it when finished.
var a = document.createElement("a");
a.download = "sample.png";
a.href = canvasdata;
document.body.appendChild(a);
a.click();
// document.body.removeChild(a);
};
}
// extract svg content
function svgData(svg){
// source is the svg element in string
var html = svg.node().innerHTML;
html = "<svg width=" +
'"' + svg.attr('width') + '"' +
" height=" + '"' + svg.attr('height') + '"' +
' version="1.1" xmlns="https://www.w3.org/2000/svg">' +
html +
"</svg>"
var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
console.log(html);
return imgsrc;
}
// window.btoa(unescape(encodeURIComponent(html)));
</script>
</body>
https://d3js.org/d3.v3.min.js