在单个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")