Javascript 在下载PNG之前将SVG标题添加到plotly图表

我有一个Javascript绘图图表，没有标题，我提供下载PNG图像。该图像应该有一个标题，因此我尝试在下载之前将其添加到SVG树中：

  d3.select(".main-svg .draglayer")
    .append("svg:text")
      .attr("id", "svgtitle")
      .attr("x", 50)             
      .attr("y", 50)
      .attr("text-anchor", "left")  
      .style("font-size", "26px") 
      .style("fill", "#FF0000") 
      .style("font-weight", "bold")
      .text("My chart");

这个想法是在下载图像后通过类似于

svg.remove（“svgtitle”）

的方式删除标题

我使用了d3js select和append，因为我还使用这个库在我的站点上绘制了一些地图，但使用普通Javascript时应该是一样的：

var title = document.createElementNS("http://www.w3.org/2000/svg", 'text');
title.setAttribute("x", 20);
...

为了表现出我不想要的行为，我根据官方的计划做了一个演讲

---

我做错了什么，或者有没有更简单的方法来添加一个只在导出时可见但在屏幕上不可见的元素？

这很简单，但您需要考虑

DOM

和

gd

对象之间的差异。在

.main svg

上更改的所有内容都会影响

DOM

，但不会影响

绘图对象。在代码中，要更改对象，需要对其执行操作
gd

根据文档，
标题
位于名为
布局
的结构中。因此，您可以随时使用
javascript
对其进行设置。在代码中，您可以绘制不带标题的图表（
Plotly.plot（）
），然后更改标题（
gd.layout.title
），然后下载PNG。标题结构具有多个文本和字体功能键。你可以看到一个演示。我删除了您在
DOM
中设置的标题