Javascript 下载的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');
}
}); 

原始散点图的链接示例： 这里是下载的图片 原始散点图

附加行的代码：

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

及

---

由于用于下载SVG的功能仅依赖于SVG内容，因此在D3代码中设置

笔划

和

笔划宽度

，而不是在CSS中：

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

---

请共享代码中附加该行的部分。@GerardoFurtado我更新了代码。为什么该行是红色的？你有那行的CSS吗？是的，路径{fill:#CED8B6；}行{stroke:#555；stroke width:2px；}行{stroke:red；stroke width:2px；}这就是问题所在，只是在发布答案之前确认一下。它起作用了，所以我们需要在d3中定义样式，而不是在CSS中。在这种情况下，是的，因为“下载”函数只获取SVG内容。在浏览器中，该行显示为read，因为浏览器使用CSS来设置屏幕上显示的所有元素的样式（当然，如果CSS中存在）。“…该行显示为红色…”该死的自动更正。如果您有任何想法，我想从上面的示例中问一些问题，是否可以在图中单击删除一个点，然后重新绘制线？因为这是另一个问题，请发布新问题。此外，当您的问题在这里被固定时，请考虑对答案进行标记，这样将来的用户会发现它是有效的。

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