javascript - 在单个 html 页面中下载两个不同 d3 图的图像？

Question

我为我的工具创建了一个可以离线工作(客户端)的 html 页面。此页面正在创建两个不同的基于 d3 的图表，我为每个图表创建了两个不同的按钮(保存和保存1)来下载这些图像。在两个不同的 html 页面中分别进行测试时，这两个图像下载按钮工作正常。

现在，组合 html 页面中的问题是每个按钮仅下载第一个基于 d3 的图形的图像。

我为每个图形创建定义了两个不同的 svg 变量(svg 和 svg1)，但我不知道如何在 downloadimage 脚本中以不同的方式调用它。

**我认为调用“node( ).parentNode.innerHTML;”时出现问题(在下面的 svg 下载脚本中提到)？ 但我不知道如何在这个脚本中调用不同的SVG。 这是我第一次从事 d3 工作。 **

d3.select("#save1").on("click", function(){  //button save in first graph;
  var html1 = d3.select("svg")           //var html in first graph;
    .attr("version", 1.1)
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .node( ).parentNode.innerHTML;   
    //console.log(html);

  var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html1);
  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 = "image.png";
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
 a.click();
}
}); 

Answer 1

这一行:

 var html1 = d3.select("svg")

无论您单击哪个按钮，始终选择 DOM 中的第一个 SVG。

取而代之的是，为您的 SVG 提供唯一的 ID(例如 svg1 和 svg2)，然后通过这些 ID 进行选择:

 var html1 = d3.select("#svg1")

 var html2 = d3.select("#svg2")