如何将d3js树下载为SVG文件并填充viewBox

问题描述

我有一个D3JS树，并设法将其下载为SVG文件。我曾经使用以下代码来启用下载：

   $('#download-SVG').click(function() {
    var dl = document.createElement('a');
    document.body.appendChild(dl); // This line makes it work in Firefox.
    dl.setAttribute("href",svgDataURL(svg.node())); //function svgDataURL expects a node
    dl.setAttribute("download","hawashim.svg");
    dl.click();
   });

我无法找出如何使用Namespaces_Crash_Course建议的createElementsNS和setAttributeNS函数 使用DOM2而不是DOM1。因此，我通过使用以下代码使用parse and replace将名称空间和其他属性插入svg文档（这是不理想的）：

// A data URL can also be generated from an existing SVG element.
   function svgDataURL(svg) {
    var svgAsXML = (new XMLSerializer).serializeToString(svg);

    //parse the svg data and add name spaces (the opening svg tag).
    if(!svgAsXML.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
        svgAsXML = svgAsXML.replace(/^<g/,'<svg');
    }

    //parse the svg data and add name spaces (the closing svg tag)
    if(!svgAsXML.match(/^<\/svg[^>]/)){
        svgAsXML = svgAsXML.replace(/<\/g><\/g>/,'<\/g><\/svg>');
    }
    var dataURL = "data:image/svg+xml," + encodeURIComponent(svgAsXML);
    return dataURL;
   }

.SVG文件中的摘录：

<svg viewBox=" -2500 -420 12000 10000"  width= "100%" height= "auto" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" .... </svg>

当前，我在文件中手动插入“ viewBox”和“纵横比”，但是无论我插入什么值，生成的图形都不会填充viewBox。

我有三个问题：

1. 如何将上面的代码转换为使用与我使用的功能等效的NS？
2. 我应该使用什么来使树形图填充框？
3. 是否可以根据展开树的大小动态填充viewBox？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）