d3チャート（svg）を画像に変換して表示します

Question

d3チャートをpng画像に変換しようとしています。 私はSOに関する多くの質問を読んだことがあります。

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

基本的にこれをしようとイム、リンクに記載されているが、それは仕事を得るカント何を。

<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> 

わかるように、第2引数としてxがあります。 xに対する は、私は、次の試み：

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が出力をチェックし、ケース1の場合）キャンバスオブジェクト及び画像オブジェクトは、実際には存在するが、それらの両方がブランクです。他のケースでは、いくつかの例外がスローされます。特に、3）のためのヌルポインタ4）。

私はJSに慣れていないので、おそらく非常に基本的な間違いです。 誰かが助けることができますか？

編集： 私の完全D3コード：

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出力（のみのimgタグ）：

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

Answer 1

このプラグインを試してみてくださいあなたのdivのsvgタグを含むHTMLコンテンツが必要です。だから、使用：

$('#chart').html() 

をここに例を示します

<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>

Answer 2

このプロセスがそのように（すなわち、SVGラスタグラフィックスへのベクターグラフィックを変換するラスター化と呼ばれていますベクトルグラフィックス）からpng（ラスターグラフィックス）https://en.wikipedia.org/wiki/Rasterisation

これは簡単な方法ですが（npmを使用する必要があります。 IRESのNode.js）：あなたは一気-svg2pngをインストールし、

まず、あなたのgulpfile.jsに追加し、開発の依存関係としてゴクゴク-svg2pngをインストールする必要があります。そして、

npm install --save-dev gulp-svg2png 

、それを追加しますgulpfile.js：

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

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

のでhttps://www.npmjs.com/package/gulp-svg2png