d3.js - 如何将完整的 d3 TreeMap 导出为 png 或 pdf

Question

我有一个可缩放、可拖动的树形图，它在我的 Angular 应用程序中使用了数千个节点。

Design referenced from here .

我可以从我的 d3 图表下载/导出 SVG 或 SVG 的任何父 div。

问题是只能下载不包含完整 TreeMap 的 SVG 元素，因为 SVG 会被其内部元素“g”溢出。 SVG 有一个内部组元素“g”，它大于 SVG 的高度和宽度，并且是动态的(可拖动的)。

这个“g”元素有一个完整的 TreeMap ，我无法将其导出为图像或 pdf。

如何导出完整的图表？

Answer 1

如果您要导出 SVG 文件:

1. 克隆原始 SVG 节点
2. 将其附加到文档中，以便计算边界框
3. 从您正在平移和缩放的父 g 节点清除变换
4. 使用内容边界框尺寸设置克隆的 SVG 的宽度和高度
5. 序列化 SVG 并将其作为文档下载

您可能需要向 SVG 添加内联样式，以便它在原始 d3 应用程序之外正确呈现。

例子:

  const svg = document.querySelector('svg').cloneNode(true); // clone your original svg
  document.body.appendChild(svg); // append element to document
  const g = svg.querySelector('g') // select the parent g
  g.setAttribute('transform', '') // clean transform
  svg.setAttribute('width', g.getBBox().width) // set svg to be the g dimensions
  svg.setAttribute('height', g.getBBox().height)
  const svgAsXML = (new XMLSerializer).serializeToString(svg);
  const svgData = `data:image/svg+xml,${encodeURIComponent(svgAsXML)}`
  const link = document.createElement("a");
  document.body.appendChild(link); 
  link.setAttribute("href", svgData);
  link.setAttribute("download", "image.svg");
  link.click();

如何从 Canvas 导出 SVG。 http://bl.ocks.org/curran/7cf9967028259ea032e8