Convert d3 chart (svg) to an image and display it

Question

Im trying to convert a d3 chart to a png image. I've read many question on SO, which explains how to do it.

Capture HTML Canvas as gif/jpg/png/pdf?

Basically im trying this, what is mentioned in the link, but cant get it to work.

<div class="chart" id="chart" style="width: 50%; margin: 0 auto;"></div>

<script src="/js/d3.js"></script>
<script src="/js/canvg.js"></script>
<script src="/js/jquery-2.2.0.js"></script>

<!-- d3 code -->    
<script type="text/javascript">
   ...
   var svg = d3.select(".chart").append("svg").attr("id", "mysvg").attr("width",
                width + margin.left + margin.right).attr("height",
                height + margin.top + margin.bottom);
   ...
</script>

<canvas id="canvas" width="200" height="200"></canvas>
<script type="text/javascript">
    canvg(document.getElementById('canvas'), x);
    var canvas = document.getElementById('canvas');
    var img = canvas.toDataURL('image/png');
    document.write('<img src="'+img+'"/>');
</script>

As u can see, there is an x as second arg. For the x, i tried the following:

1) <svg>'+$('#chart').html()+'</svg>
2) $('svg').html()
3) document.getElementById('chart').firstChild
4) document.getElementById('mysvg')
5) $('#chart').html()  (Answer by Mark, working on his example, but not on my example)

I checked the output, and for case 1) there are actually a canvas object and an image object, but both of them are blank. In the other cases, there some exceptions thrown, especially null pointers for 3) 4).

I am not experienced with JS, so maybe it is some very basic mistake.. Can anyone help ?

edit: my full d3-code:

var margin = {
        top : 20,
        right : 20,
        bottom : 30,
        left : 50
    }, width = 960 - margin.left - margin.right, height = 500 - margin.top
            - margin.bottom;


    d3.json("data/measure.json", function(error, data) {
        console.log(data);
        if (error)
            throw error;

        /* defining scales axis */
        var x = d3.scale.linear().domain([ 0, d3.max(data[0].route, function(d) {return d.time; })])
                .range([ 0, width ]);

        var y = d3.scale.linear().domain([ d3.min(data[0].route, function(d) { return d.consume;}), d3.max(data[0].route, function(d) {return d.consume; })])
                .range([ height, 0 ]);

        var xAxis = d3.svg.axis().scale(x).orient("bottom")
                        .tickPadding(10)
                        .innerTickSize(-height)
                        .outerTickSize(0)
                        .ticks(data[0].route.length);


        var yAxis = d3.svg.axis().scale(y).orient("left")
                        .tickPadding(10)
                        .innerTickSize(-width)
                        .outerTickSize(0);

        // painting curves                  
        var line = d3.svg.line().x(function(d,i) { console.log(d.time); return x(d.time);})
                                .y(function(d,i) { return y(d.consume); });

        var foreignCurve = d3.svg.line().x(function(d,i) { return x(d.time); })
                                        .y(function(d,i) { return y(d.consume); })


        //main chart component    
        var svg = d3.select(".chart").append("svg").attr("width",
                width + margin.left + margin.right).attr("height",
                height + margin.top + margin.bottom).append("g").attr(
                "transform",
                "translate(" + margin.left + "," + margin.top + ")");

        svg.append("g").attr("class", "x axis").call(xAxis).attr(
                "transform", "translate(0," + height + ")").append("text")
                .style("text-anchor", "end").attr("x", width).attr(
                        "y", -10).text("time (s)").attr("font-weight", "bold");

        var axisG = svg.append("g");

        axisG.attr("class", "y axis").attr("dx", ".5em").call(yAxis)
                .append("text").attr("transform", "rotate(-90)").attr("y",
                        6).attr("dy", ".71em").style("text-anchor", "end")
                .text("Bandwidth (Kbps)").attr("font-weight","bold");


        svg.append("path").datum(data[0].route).attr("class", "line").attr(
                "d", line);

        svg.append("path").datum(data[0].foreign).attr("class","line2").attr("d", foreignCurve);

        var group = svg.append("g");

        group.append("line").attr("class", "mean-line").attr({
            x1 : x(0),
            y1 : y(data[0].threshold),
            x2 : x(d3.max(data[0].route, function(d) {
                return d.time;
            })),
            y2 : y(data[0].threshold)
        });

        group.append("line").attr("class", "mean-line").attr({
            x1 : x(0),
            y1 : y(data[0].threshold*1.05),
            x2 : x(d3.max(data[0].route, function(d) {
                return d.time;
            })),
            y2 : y(data[0].threshold*1.05)
        });

        group.append("text").style("text-anchor", "end").attr("y",
                y(data[0].threshold*1.05) - 5).attr("x", x(d3.max(data[0].route, function(d) {
            return d.time;
        }))).attr("fill", "gray").text("buffered limit");

        group.append("text").style("text-anchor", "end").attr("y",
                y(data[0].threshold) + 10).attr("x", x(d3.max(data[0].route, function(d) {
            return d.time;
        }))).attr("fill", "gray").text("limit");

html output (only img tag):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAsUlEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8GXHmAAFMgHIEAAAAAElFTkSuQmCC">

Answer 1

this process is called rasterisation so converting vector graphics to raster graphics i.e svg (vector graphics) to png (raster graphics) https://en.wikipedia.org/wiki/Rasterisation

It is easier way to do this (but it requires use of npm, thus npm to work requires Node.js): you must install gulp-svg2png and add it to your gulpfile.js

First, install gulp-svg2png as a development dependency:

npm install --save-dev gulp-svg2png

Then, add it to your gulpfile.js:

var svg2png = require('gulp-svg2png');

gulp.task('svg2png', function () {
    gulp.src('./specs/assets/**/*.svg')
        .pipe(svg2png())
        .pipe(gulp.dest('./build'));
});

so try this plugin https://www.npmjs.com/package/gulp-svg2png

Answer 2

You need the html content of your chart div including the svg tags. So use:

$('#chart').html()

Here's an example:

<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://rawgit.com/gabelerner/canvg/master/canvg.js"></script>
</head>

<body>
  <div class="chart" id="chart" style="width: 50%; margin: 0 auto;"></div>
  <!-- d3 code -->
  <script type="text/javascript">
    var svg = d3.select(".chart").append("svg")
    .attr("id", "mysvg")
    .attr("width", 500)
    .attr("height", 500);
    
    svg.selectAll('.bar')
      .data([1,2,3,4])
      .enter()
      .append('rect')
      .attr('y', function(d,i){
        return d * 50;
      })
      .attr('height', function(d,i){
        return 500 - (d * 50);
      })
      .attr('width', 50)
      .attr('x', function(d,i){
        return i * 100;
      })
      .style('fill', 'steelblue');
    
  </script>
  <canvas id="canvas" width="200" height="200"></canvas>
  <script type="text/javascript">
    canvg(document.getElementById('canvas'), $('#chart').html());
    var canvas = document.getElementById('canvas');
    var img = canvas.toDataURL('image/png');
    document.write('<img src="' + img + '"/>');
  </script>
</body>

</html>