d3散布図のダウンロードした画像に行がありません

Question

相関線を含むd3散布図を使用しています。すべてがうまくいきます。ダウンロードボタンを追加すると画像をダウンロードできますが、画像に行がありません。私は以下の関数を使って画像をダウンロードしています。

d3.select("#downloadplot").on("click", function(){ 
    var html = d3.select("svg") 
    .attr("version", 1.1) 
    .attr("xmlns", "http://www.w3.org/2000/svg") 
    .node().parentNode.innerHTML; //node().parentNode.innerHTML; 

    //console.log(html); 

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); 
var image = new Image; 
image.src = imgsrc; 

image.onload = function() { 
var canvas = document.createElement('canvas'); 
canvas.width = image.width; 
canvas.height = image.height; 
var context = canvas.getContext('2d'); 
context.fillStyle = "#FFFFFF"; 
context.fillRect(0,0,image.width,image.height); 
context.drawImage(image, 0, 0); 

var a = document.createElement('a'); 
a.download = "sampleidvgraph.png"; 
a.href = canvas.toDataURL('image/png'); 
document.body.appendChild(a); 
a.click().attr('target', '_blank'); 
} 
}); 

元散布図の例のリンク：

// Best fit line (to appear behind points) 
    d3.select('svg g.chart') 
    .append('line') 
    .attr('id', 'bestfit'); 

と

： http://prcweb.co.uk/lab/what-makes-us-happy/ ここでは、Image オリジナル散布図に行を追加

コードをダウンロードされます

 // Fade in 
      d3.select('#bestfit') 
      .style('opacity', 0) 
      .attr({'x1': xScale(x1), 'y1': yScale(y1), 'x2': xScale(x2), 'y2': yScale(y2)}) 
      .transition() 
      .duration(1500) 
      .style('opacity', 1); 

Answer 1

あなたがSVGをダウンロードするために使用している機能のみが、D3のコードではなく、CSSでstrokeとstroke-widthを設定SVGコンテンツに依存しているので：

d3.select('#bestfit') 
    .style('opacity', 0) 
    .style("stroke", "red")//set the colour here 
    .style("stroke-width", 2)//set the width here 
    .attr({ 
     'x1': xScale(x1), 
     'y1': yScale(y1), 
     'x2': xScale(x2), 
     'y2': yScale(y2) 
    }) 
    .transition() 
    .duration(1500) 
    .style('opacity', 1);