Convert SVG to an image on-the-fly.
This article from MDN explains the process of rendering a DOM object on
a canvas element:
Drawing DOM object into a canvas.
Rendering to an <img> element is very similar.
This works for any DOM object, not just SVG. Not sure if this is well supported
by older browsers. Works on Chrome, Firefox and IE 10 for me.
The bar chart is a fork of this block by Mike Bostock:
Canvas Bar Chart.
| letter | frequency | |
|---|---|---|
| A | .08167 | |
| B | .01492 | |
| C | .02782 | |
| D | .04253 | |
| E | .12702 | |
| F | .02288 | |
| G | .02015 | |
| H | .06094 | |
| I | .06966 | |
| J | .00153 | |
| K | .00772 | |
| L | .04025 | |
| M | .02406 | |
| N | .06749 | |
| O | .07507 | |
| P | .01929 | |
| Q | .00095 | |
| R | .05987 | |
| S | .06327 | |
| T | .09056 | |
| U | .02758 | |
| V | .00978 | |
| W | .02360 | |
| X | .00150 | |
| Y | .01974 | |
| Z | .00074 |
| <html> | |
| <head> | |
| <style> | |
| /* Any styling on the SVG won't transfer to the Canvas */ | |
| /* Styling must be done inline */ | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var margin = { top: 20, right: 20, bottom: 30, left: 40 }, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scaleBand() | |
| .rangeRound([0, width]) | |
| .padding(0.1); | |
| var y = d3.scaleLinear() | |
| .rangeRound([height, 0]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("xmlns", "http://www.w3.org/2000/svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.tsv("data.tsv", processRow, function(error, data) { | |
| if (error) throw error; | |
| // Update scales | |
| x.domain(data.map(function(d) { return d.letter; })); | |
| y.domain([0, d3.max(data, function(d) { return d.frequency; })]); | |
| // Draw axes | |
| g.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)) | |
| .select("path") | |
| .style("stroke", "none"); | |
| g.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(d3.axisLeft(y).tickFormat(d3.format(".0%"))) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("dx", "-1em") | |
| .attr("dy", "1.66em") | |
| .style("fill", "#000") | |
| .text("Frequency"); | |
| // Draw bars | |
| g.append("g") | |
| .attr("class", "bars") | |
| .selectAll(".bar").data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.letter); }) | |
| .attr("y", function(d) { return y(d.frequency); }) | |
| .attr("width", x.bandwidth()) | |
| .attr("height", function(d) { return height - y(d.frequency); }) | |
| .style("fill", "steelblue"); | |
| // Convert SVG to image | |
| // see: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas | |
| var DOMURL = window.URL || window.webkitURL || window; | |
| var svgString = domNodeToString(svg.node()); | |
| var image = new Image(); | |
| var svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" }); | |
| var url = DOMURL.createObjectURL(svgBlob); | |
| image.onload = function() { | |
| d3.select("body").node().appendChild(image); | |
| DOMURL.revokeObjectURL(url); | |
| } | |
| image.src = url; | |
| }); | |
| function processRow(d) { | |
| d.frequency = +d.frequency; | |
| return d; | |
| } | |
| // Get the string representation of a DOM node (removes the node) | |
| function domNodeToString(domNode) { | |
| var element = document.createElement("div"); | |
| element.appendChild(domNode); | |
| return element.innerHTML; | |
| } | |
| </script> | |
| </body> | |
| </html> |
