Javascript 如何将getElementById与getBBox一起使用以确定svg的宽度和高度

我有一个D3JS树，并设法将其作为SVG文件下载，但是，我希望viewBox的大小根据SVG框的大小而变化，以便更好地可视化。建议将getElementById与getBBox结合使用。 我不知道如何将正确的svg内容传递给getElementById，而我提供的任何输入都将为null

当我怀疑我的代码时，我用一个标准的D3JS树来试验函数的用法，但仍然不知道如何使用这些函数

我的svg选择是

 var svg = d3.select("div.svg-container-ar").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .call(zoom)
    .on("wheel.zoom", null) //disable zooming on mouse wheel scroll
    .on("dblclick.zoom", null)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")scale(.7,.7)");
    zoom.translate([margin.left, margin.top]).scale(.7);

我对返回null的getElementById的用法是

// This event is used to download SVG document
   $('#download-SVG').click(function() {
   var svgElement = document.getElementById('svg');
   // console.log(svgElement);
   let {width, height} = svgElement.getBBox();
   .
   .
   }

如果您能在这方面提供帮助，或者有其他方法可以满足可变视口大小的要求，我将不胜感激。

功能准备下载（svgEl）{
//获取dom元素的bbox。
//在某些情况下，您可能希望从内部元素获取bbox
//实际形状的位置。
常量bBox=svgEl.node（）.getBBox（）
//设置与bbox匹配的SVG的viewBox
svgEl.attr（“viewBox”、`${bBox.x}${bBox.y}${bBox.width}${bBox.height}`）
//调用保存函数（在StackOverflow的沙箱上不起作用）
saveSvg（svgEl.node（），“my svg.svg”）
//移除viewBox，使其在屏幕上看起来与往常一样
svgEl.attr（'viewBox'，null）
}
函数saveSvg（svgEl，名称）{
setAttribute（“xmlns”http://www.w3.org/2000/svg")
常量svgData=svgEl.outerHTML
console.log（svgData）
常量前言='\r\n'
const svgBlob=newblob（[前言，svgData]，{type:“image/svg+xml；charset=utf-8”}）
const svgUrl=URL.createObjectURL（svgBlob）
const downloadLink=document.createElement（“a”）
downloadLink.href=svgUrl
downloadLink.download=名称
document.body.appendChild（下载链接）
下载链接。单击（）
document.body.removeChild（下载链接）
}
document.querySelector（'button'）。addEventListener（“单击”，函数（））{
准备下载（d3.选择（“svg”））
})

下载

功能准备下载（svgEl）{
//获取dom元素的bbox。
//在某些情况下，您可能希望从内部元素获取bbox
//实际形状的位置。
常量bBox=svgEl.node（）.getBBox（）
//设置与bbox匹配的SVG的viewBox
svgEl.attr（“viewBox”、`${bBox.x}${bBox.y}${bBox.width}${bBox.height}`）
//调用保存函数（在StackOverflow的沙箱上不起作用）
saveSvg（svgEl.node（），“my svg.svg”）
//移除viewBox，使其在屏幕上看起来与往常一样
svgEl.attr（'viewBox'，null）
}
函数saveSvg（svgEl，名称）{
setAttribute（“xmlns”http://www.w3.org/2000/svg")
常量svgData=svgEl.outerHTML
console.log（svgData）
常量前言='\r\n'
const svgBlob=newblob（[前言，svgData]，{type:“image/svg+xml；charset=utf-8”}）
const svgUrl=URL.createObjectURL（svgBlob）
const downloadLink=document.createElement（“a”）
downloadLink.href=svgUrl
downloadLink.download=名称
document.body.appendChild（下载链接）
下载链接。单击（）
document.body.removeChild（下载链接）
}
document.querySelector（'button'）。addEventListener（“单击”，函数（））{
准备下载（d3.选择（“svg”））
})

下载

您的元素没有id属性，因此

document.getElementById（）

无法找到它。改为使用

document.querySelector（'svg'）

，它将查找DOM中的第一个

元素。您的元素没有id属性，因此

document.getElementById（）

找不到它。改为使用

document.querySelector（'svg'）

，它将查找DOM中的第一个

元素。我不希望原始高度和宽度保持较高，因为它们可以容纳潜在的大型树。这在屏幕上很好，但是，我需要使视图框适合svg，这样当它作为独立文件下载并打印时，它会以打开的节点数的最佳大小显示。我明白了。我想我现在明白了。我使用了一个简单得多的示例，因为对于使用D3生成的复杂SVG也是如此。这对你有用吗？多亏了@ccprog建议，我使用了document.querySelector（'svg'），trickI不需要原始的高度和宽度，因为它们保持在很高的位置以容纳潜在的大树。这在屏幕上很好，但是，我需要使视图框适合svg，这样当它作为独立文件下载并打印时，它会以打开的节点数的最佳大小显示。我明白了。我想我现在明白了。我使用了一个简单得多的示例，因为对于使用D3生成的复杂SVG也是如此。它对你有用吗？多亏了@ccprog建议，我使用了document.querySelector（'svg'），它成功了