<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>D3.js</title>
</head>
<body>
<div id="svg"></div>
<button id="save">Save as Image</button>
<div id="svgdataurl"></div>
<div id="pngdataurl"></div>
<canvas style="display:none"></canvas>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var type = 'default'
var width = 800;
var height = 800;
var padding = 50;
if(type == 'small') {
width = 400;
height = 400;
padding = 25;
}
d3.select('canvas')
.attr('width', width)
.attr('height', height);
var svg = d3.select('#svg').append('svg').attr({id:'g',width:width,height:height});
var xScale = d3.scale.linear()
.domain([0.0, 1.0])
.range([padding, width - padding]);
var yScale = d3.scale.linear()
.domain([0.0, 1.0])
.range([height - padding, padding]);
svg.append('defs').append('marker')
.attr('id', 'arrow')
.attr('refX', 4)
.attr('refY', 8)
.attr('orient', 'auto')
.attr('viewBox', "0 0 12 16")
.append('path')
.attr('d', "M4,8 L0,0 L12,8 L0,16 Z")
.attr('fill', 'blue')
.attr('markerUnits', 'strokeWidth');
svg.append('rect')
.attr('x', padding)
.attr('y', padding)
.attr('width', width - padding *2)
.attr('height', height - padding *2)
.attr('fill', 'white');
var draw_line = function(stroke_width, color, x1, y1, x2, y2) {
svg.append('line')
.attr({x1:x1,y1:y1,x2:x2,y2:y2})
.attr('stroke-width', stroke_width)
.attr('stroke', color);
//.attr('marker-end', "url(#arrow)");
};
var draw_lineseq = function(stroke_width, color, seq) {
for(var i = 0; i < seq.length-1; i++) {
var x1 = xScale(seq[i][0]);
var y1 = yScale(seq[i][1]);
var x2 = xScale(seq[i+1][0]);
var y2 = yScale(seq[i+1][1]);
draw_line(stroke_width, color, x1, y1, x2, y2);
}
}
var draw_points = function(r, color, points) {
points.forEach(function(d) {
svg.append('circle')
.attr('fill', color)
.attr('cx', xScale(d[0]))
.attr('cy', yScale(d[1]))
.attr('r', r);
});
}
var draw_boards = function(stroke_width, color, boards) {
boards.forEach(function(b) {
var x1 = xScale(b[0][0]);
var y1 = yScale(b[0][1]);
var x2 = xScale(b[1][0]);
var y2 = yScale(b[1][1]);
draw_line(stroke_width, color, x1, y1, x2, y2);
});
}
var draw_label = function(str, size, color, x, y) {
svg.append('text')
.attr('x', x)
.attr('y', y)
.attr('font-size', size)
.attr('fill', color)
.text(str);
}
d3.json("result.json",function(e,json) {
var answer = json["answer"];
var intermediate = json["intermediate"];
var boards = json["boards"];
var boundary = [[0,0],[1,0],[1,1],[0,1],[0,0]];
if(boards) {
draw_boards(3, 'green', boards);
}
draw_lineseq(3, 'black', boundary);
if(intermediate && false) {
draw_lineseq(3, 'black', intermediate);
draw_points(5, 'blue', intermediate);
}
if((type != 'noanswer') && answer && true) {
draw_lineseq(3, 'black', answer);
draw_points(5, 'red', answer);
}
if(type != 'small') {
draw_label("START", 30, 'orange', padding, height - padding + 30);
draw_label("END", 30, 'orange', width - padding - 55, padding - 5);
}
});
d3.select("#save").on("click", function(){
var html = d3.select("svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.node().parentNode.innerHTML;
//console.log(html);
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#svgdataurl").html(img);
var canvas = document.querySelector("canvas"),
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");
var pngimg = '<img src="'+canvasdata+'">';
d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "sample.png";
a.href = canvasdata;
a.click();
};
});
</script>
</body>