Как экспортировать полный SVG в PNG, так как мой SVG очень большой.

Question

У меня 2000 узлов в SVG с использованием новой версии getOrgChart.Я хочу экспортировать полный SVG в PNG, но PNG показывает только те узлы, которые отображаются в браузере.Например, если в браузере выполняется рендеринг 20 узлов, тогда PNG показывает только 20 узлов, но мне нужен весь SVG, имеющий 2000 узлов.

Answer 1

BANKANGraph Developer evangelist здесь.

По умолчанию свернутые дочерние элементы не будут экспортироваться, если вы хотите изменить это, вы должны добавить свой собственный пункт меню узла экспорта

Вот пример:

 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"/>

Если вы экспортируете диаграмму выше, все узлы будут развернуты