Question

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

Design referenced from here。

我可以从d3图形中下载/导出SVG或SVG的任何父分区。

问题在于只能下载不包含完整树形图的SVG元素，因为SVG的内部元素“ g”会溢出。 SVG的内部组元素“ g”大于SVG的高度和宽度，并且是动态的（可拖动）。

此“ g”元素具有完整的树状图，我无法将其导出为图像或pdf。

如何导出完整的图形？

Answer 1

如果要导出SVG文件：

克隆原始的SVG节点
将其附加到文档中，以便计算出边界框
在要转换和缩放的父g节点上清除转换
使用内容边框的尺寸和高度设置克隆的SVG
序列化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();

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

如何将完整的d3树形图导出为png或pdf

1 个答案: