在單個 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。

取而代之的是，為您的svg1提供唯一 ID（如svg1和svg2 ），並通過這些 ID 進行選擇：

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

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