в загруженном изображении рассеянного графика d3 отсутствует линия

Я использую 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');
}
}); 

ссылка на пример исходного примера рассеяния: http://prcweb.co.uk/lab/what-makes-us-happy/ здесь загружается Изображение Исходный график рассеяния

код, который добавляет строку:

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

а также

       // 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);