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

问题描述

我有一个D3JS树，并设法将其下载为SVG文件，但是，我希望viewBox的大小根据svg框的大小而有所不同，以实现更好的可视化效果。建议将getElementById与getBBox结合使用。 我无法弄清楚如何将正确的svg内容传递给getElementById，并且我提供的任何输入都为空。

由于我对我的代码感到怀疑，所以我使用标准的D3JS树example对其进行了尝试，以尝试使用这些函数，但仍然不知道如何使用这些函数。

我的svg选择为

{
    name: {
        type: String
    },available_in: [{
        variation: {
            type: Number
        },variation_type: {
            type: String,enum: ['gm','kg','ml','ltr','unit','lbs','oz','pound','gallon']
        },rate: {
            type: Number
        },stock: {
            type: Number
        },discount_type: {
            type: String,enum: ['special','daily','normal','',' ']
        },discount_percentage: {
            type: Number
        },start_date: {
            type: Date
        },end_date: {
            type: Date
        },discounted_rate: {
            type: Number,required: true
        },is_deleted: {
            type: Boolean,default: false
        },tax_percentage: {
            type: Number,default: 0
        },tax_value: {
            type: Number,default: 0
        }
    }],}

而我将getElementById调整为null的用法是

 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);

如果有任何帮助实现可变的viewBox大小要求的方法，我将不胜感激。

解决方法

  "dependencies": {
    "@angular/animations": "^9.1.12","@angular/cdk": "^9.2.4","@angular/common": "~9.1.12","@angular/compiler": "~9.1.12","@angular/core": "~9.1.12","@angular/flex-layout": "^9.0.0-beta.31","@angular/forms": "~9.1.12","@angular/material": "^9.2.4","@angular/platform-browser": "~9.1.12","@angular/platform-browser-dynamic": "~9.1.12","@angular/router": "~9.1.12","@auth0/angular-jwt": "^5.0.1","@azure/msal-angular": "^1.0.0","@juggle/resize-observer": "^3.2.0","@microsoft/signalr": "^3.1.8","@ngx-translate/core": "^12.1.2","@ngx-translate/http-loader": "^4.0.0","angular-gridster2": "^8.3.0","angular-resize-event": "^1.2.1","azure-maps-control": "^2.0.26","classlist.js": "^1.1.20150312","lodash": "^4.17.15","moment": "^2.29.0","msal": "^1.3.2","ng-dynamic-component": "^5.0.6","ngx-json-viewer": "^2.4.0","ngx-simple-modal": "^1.4.11","rxjs": "~6.5.2","tslib": "^1.10.0","zone.js": "~0.10.2"
  },"devDependencies": {
    "@angular-devkit/build-angular": "~0.901.12","@angular/cli": "~9.1.12","@angular/compiler-cli": "~9.1.12","@angularclass/hmr": "^2.1.3","@compodoc/compodoc": "^1.1.9","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","@types/lodash": "^4.14.155","@types/node": "^12.11.1","@types/webpack-env": "^1.14.0","codelyzer": "^5.1.2","cpx": "^1.5.0","jasmine-core": "~3.5.0","jasmine-reporters": "^2.3.2","jasmine-spec-reporter": "~4.2.1","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-cli": "~2.0.0","karma-coverage-istanbul-reporter": "~2.1.0","karma-jasmine": "~3.0.1","karma-jasmine-html-reporter": "^1.4.2","karma-junit-reporter": "^1.2.0","protractor": "~7.0.0","protractor-console-plugin": "^0.1.1","puppeteer": "^1.17.0","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~3.8.3"
  }

function prepareDownload(svgEl) {
  // Get bbox of the dom element.
  // In some case you may want to get the bbox from an inner <g> element
  // where the actual shapes are.
  const bBox = svgEl.node().getBBox()
  // Set the viewBox of the SVG matching the bbox
  svgEl.attr("viewBox",`${bBox.x} ${bBox.y} ${bBox.width} ${bBox.height}`)
  // Call the saving function (won't work on Stackovertflow's sandbox)
  saveSvg(svgEl.node(),'my-svg.svg')
  // Remove the viewBox so it looks on screen the same as always
  svgEl.attr('viewBox',null)
}

function saveSvg(svgEl,name) {
  svgEl.setAttribute("xmlns","http://www.w3.org/2000/svg")
  const svgData = svgEl.outerHTML
  console.log(svgData)
  const preface = '<?xml version="1.0" standalone="no"?>\r\n'
  const svgBlob = new Blob([preface,svgData],{type:"image/svg+xml;charset=utf-8"})
  const svgUrl = URL.createObjectURL(svgBlob)
  const downloadLink = document.createElement("a")
  downloadLink.href = svgUrl
  downloadLink.download = name
  document.body.appendChild(downloadLink)
  downloadLink.click()
  document.body.removeChild(downloadLink)
}

document.querySelector('button').addEventListener("click",function() {
  prepareDownload(d3.select("svg"))
})