时间戳

首页 > 解决方案 > 在下载 PNG 之前将 SVG 标题添加到绘图图表

javascript - 在下载 PNG 之前将 SVG 标题添加到绘图图表

问题描述

我有一个没有标题的 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 Basic Bar Chart Example制作了一个代码笔。

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

标签： javascriptd3.jssvgplotly

解决方案

很简单，但是需要考虑到DOM和gd对象的区别。您更改的所有内容都会.main-svg影响DOM，但不会影响plotly对象。在您的代码中，要更改您需要操作的对象gd。

根据文档，title它位于一个名为layout. 因此，您可以随时设置它javascript。在您的代码中，您可以绘制没有标题 ( Plotly.plot()) 的图表，然后更改标题 ( gd.layout.title)，然后下载 PNG。标题结构有几个用于文本和字体功能的键。你可以在这里看到一个演示。我删除了您在DOM.

推荐阅读