title: Convert d3 chart (svg) to an image and display it
body: <p>Im trying to convert a d3 chart to a png image.
  I've read many question on SO, which explains how to do it.</p>
  
  <p><a href="https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf/3514404#3514404">Capture HTML Canvas as gif/jpg/png/pdf?</a></p>
  
  <p>Basically im trying this, what is mentioned in the link, but cant get it to work.</p>
  
  <pre><code>&lt;div class="chart" id="chart" style="width: 50%; margin: 0 auto;"&gt;&lt;/div&gt;
  
  &lt;script src="/js/d3.js"&gt;&lt;/script&gt;
  &lt;script src="/js/canvg.js"&gt;&lt;/script&gt;
  &lt;script src="/js/jquery-2.2.0.js"&gt;&lt;/script&gt;
  
  &lt;!-- d3 code --&gt;    
  &lt;script type="text/javascript"&gt;
     ...
     var svg = d3.select(".chart").append("svg").attr("id", "mysvg").attr("width",
                  width + margin.left + margin.right).attr("height",
                  height + margin.top + margin.bottom);
     ...
  &lt;/script&gt;
  
  &lt;canvas id="canvas" width="200" height="200"&gt;&lt;/canvas&gt;
  &lt;script type="text/javascript"&gt;
      canvg(document.getElementById('canvas'), x);
      var canvas = document.getElementById('canvas');
      var img = canvas.toDataURL('image/png');
      document.write('&lt;img src="'+img+'"/&gt;');
  &lt;/script&gt;
  </code></pre>
  
  <p>As u can see, there is an <code>x</code> as second arg.
  For the x, i tried the following:</p>
  
  <pre><code>1) &lt;svg&gt;'+$('#chart').html()+'&lt;/svg&gt;
  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)
  </code></pre>
  
  <p>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).</p>
  
  <p>I am not experienced with JS, so maybe it is some very basic mistake..
  Can anyone help ? </p>
  
  <p>edit: 
  my full d3-code: </p>
  
  <pre><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");
  </code></pre>
  
  <p>html output (only img tag):</p>
  
  <pre><code>&lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAsUlEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8GXHmAAFMgHIEAAAAAElFTkSuQmCC"&gt;
  </code></pre>