Javascript 为什么视图框比D3JS树形图大
我成功地将我的D3JS树下载为SVG文件,当在Inkscape中查看时,该文件位于视图框中,使用以下代码:Javascript 为什么视图框比D3JS树形图大,javascript,svg,d3.js,download,viewbox,Javascript,Svg,D3.js,Download,Viewbox,我成功地将我的D3JS树下载为SVG文件,当在Inkscape中查看时,该文件位于视图框中,使用以下代码: // This event is used to download SVG document $('#download-SVG').click(function() { var svgElement = document.querySelector('svg'); var svgWH = svgElement.getBBox(); var canvasWid
// This event is used to download SVG document
$('#download-SVG').click(function() {
var svgElement = document.querySelector('svg');
var svgWH = svgElement.getBBox();
var canvasWidth = svgWH.width;
var canvasHeight = svgWH.height;
var groupElement = document.getElementById('fg');
groupElement.setAttribute("transform", "translate(0,0)scale(.7,.7)");
const bb = groupElement.getBBox();
console.log('svg.x'+svgWH.x+' svg.y '+svgWH.y+' svg.width '+svgWH.width+' svg.height '+svgWH.height);
console.log('bb.x '+bb.x+' bb.y '+bb.y+' bb.width '+bb.width+' bb.height '+bb.height);
//clone the svg to avoid destroying it while appending to the svg namespace
let clonedSvgElement = svgElement.cloneNode(true);
var svgContent = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgContent.setAttribute('viewBox',' '+bb.x+' '+bb.y+' '+bb.width+' '+bb.height);
svgContent.setAttribute("width", "100%");
svgContent.setAttribute("height", "100%");
svgContent.setAttribute("preserveAspectRatio", "xMidYMid meet");
svgContent.appendChild(clonedSvgElement); //use the cloned nodes
var dl = document.createElement('a');
document.body.appendChild(dl);
dl.setAttribute("href", svgDataURL(svgContent)); //function svgDataURL expects a node
dl.setAttribute("download", "test.svg");
dl.click();
dl.remove();
svgContent.removeChild(clonedSvgElement);
//bring back to original position
groupElement.setAttribute("transform", 'translate('+margin.left+','+margin.top+')scale(.7)');
});
function svgDataURL(svg) {
var svgAsXML = (new XMLSerializer).serializeToString(svg);
var dataURL = "data:image/svg+xml," + encodeURIComponent(svgAsXML);
return dataURL;
}
SVG文件的内容是:
<svg xmlns="http://www.w3.org/2000/svg" viewBox=" -165 -22 430 412" width="100%" height="100%"
preserveAspectRatio="xMidYMid meet"><svg width="5000" height="1020" class="custom-translate">
<g id="fg" transform="translate(0,0)scale(.7,.7)">
<path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 -115,285 -115,375" />
<path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 -5,285 -5,375" />
<path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 105,285 105,375" />
<path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 215,285 215,375" />
<path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,15C50,105 50,105 50,195" />
<g class="node" transform="translate(165,360)">
<rect width="100" height="30"
style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(176, 196, 222);" /><text x="50" y="15"
dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Sixth</text></g>
<g class="node" transform="translate(55,360)">
<rect width="100" height="30"
style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255);" /><text x="50" y="15"
dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Fifth</text></g>
<g class="node" transform="translate(-55,360)">
<rect width="100" height="30"
style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255);" /><text x="50" y="15"
dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Fourth</text></g>
<g class="node" transform="translate(-165,360)">
<rect width="100" height="30"
style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(176, 196, 222);" /><text x="50" y="15"
dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Third</text></g>
<g class="node" transform="translate(0,180)">
<rect width="100" height="30"
style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255);" /><text x="50" y="15"
dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Second</text></g>
<g class="node" transform="translate(0,0)">
<rect width="100" height="30"
style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255);" /><text x="50" y="15"
dy=".35em" text-anchor="middle" style="fill-opacity: 1;">First</text>
<image xmlns:ns1="http://www.w3.org/1999/xlink" ns1:href="images/information.png" x="85px" y="-22px"
width="24px" height="24px" />
</g>
</g>
</svg></svg>
但是,图形周围有空格,我无法删除。我怀疑这与SVG的大小和group元素的大小有关。不要使用嵌套的SVG元素,而只使用带有viewBox的SVG元素。您能将其转化为可运行的示例吗?例如,我不知道是否有嵌套的SVG标记。另外,请添加因缩放而导致问题的行为的屏幕截图:groupElement.setAttribute(“transform”、“translate(0,0)scale(.7.7)”);我删除了缩放,图形完全符合视图框。另外,我通过如下方式克隆group元素(id“fg”)删除了额外的SVG标记:让clonedGroupElement=groupElement.cloneNode(true);
svg.x584.5 svg.y 9.600000381469727 svg.width 301 svg.height 288.3999938964844
bb.x -165 bb.y -22 bb.width 430 bb.height 412