由于我的SVG非常大,因此如何将完整的SVG导出到PNG中。

时间:2018-12-26 09:06:54

标签: javascript jquery d3.js svg

我使用getOrgChart新版本在SVG中拥有2000个节点。我想将完整的SVG导出到PNG,但PNG仅显示在浏览器上呈现的节点。就像在浏览器上呈现20个节点一样,PNG仅显示20个节点,但是我需要整个SVG具有2000个节点。

1 个答案:

答案 0 :(得分:0)

此处是BALKANGraph开发人员的传播者。

默认情况下,如果要更改必须折叠的子级,则必须添加自己的导出节点菜单项

这里是一个例子:

 function pdf(nodeId) {
            chart.exportPDF("MyFileName.pdf", true, nodeId);
        }
        function png(nodeId) {
            chart.exportPNG("MyFileName.png", true, nodeId);
        }
        function svg(nodeId) {
            chart.exportSVG("MyFileName.svg", true, nodeId);
        }

        var chart = new OrgChart(document.getElementById("tree"), {
            menu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: BALKANGraph.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
                export_png: {
                    text: "Export PNG",
                    icon: BALKANGraph.icon.png(24, 24, "#7A7A7A"),
                    onClick: png
                },
                export_svg: {
                    text: "Export SVG",
                    icon: BALKANGraph.icon.svg(24, 24, "#7A7A7A"),
                    onClick: svg
                }
            },
            nodeMenu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: BALKANGraph.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
                export_png: {
                    text: "Export PNG",
                    icon: BALKANGraph.icon.png(24, 24, "#7A7A7A"),
                    onClick: png
                },
                export_svg: {
                    text: "Export SVG",
                    icon: BALKANGraph.icon.svg(24, 24, "#7A7A7A"),
                    onClick: svg
                }
            },
            nodeBinding: {
                field_0: "name",
                field_1: "title",
                img_0: "img"
            },
            tags:{
            	collapsed: {state: BALKANGraph.COLLAPSE}
            },
            nodes: [
                { id: 1, tags: ["collapsed"], name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
                { id: 2, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" },
                { id: 3, pid: 1, name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" },
                { id: 4, pid: 3, name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" }
            ]
        });    
html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
  overflow: hidden;
  font-family: Helvetica;
}
#tree{
  width:100%;
  height:100%;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"/>

如果将图表导出到所有节点上方,则会展开

enter image description here