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

Question

我有一个没有标题的Javascript Plotly图表，我提供下载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选择和追加，因为我还使用这个库在我的网站上绘制一些地图，但使用普通的Javascript应该是一样的。

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

为了显示不需要的行为，我做了一个 代码笔 根据官方的Plotly 基本条形图示例.

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

Answer 1

这很简单，但你需要考虑到以下几个方面的区别 DOM 和 gd 对象。你所改变的一切 .main-svg 影响 DOM但不是 plotly 对象。在你的代码中，要改变对象，你需要对以下内容进行操作 gd.

根据该文件， title 是在一个叫做 layout. 因此，你可以用 javascript 在任何时候都可以。在您的代码中，您可以在没有标题的情况下绘制图表(Plotly.plot())，然后更改标题(gd.layout.title)，然后下载PNG。标题结构有几个键的文字和字体功能。你可以看到一个演示 此处. 我删除了你在 DOM.