Загрузка изображения древовидной диаграммы d3.js не показывает полное изображение дерева. Определенная часть изображения не видна при увеличении размера диаграммы

Question

Изображение древовидной диаграммы: - TreeChart

---

Я построил древовидную диаграмму d3.js, размер диаграммы больше размера окна, но я хочу загрузить всю древовидную диаграмму в виде изображения в формате PNG, а затем увеличить ее и увидеть каждый узел. Когда я пытаюсь загрузить PNG, вся картинка не отображается, а некоторые узлы не отображаются в загруженном изображении Я попытался изменить размер и изменить положение в пределах размера окна, но по мере того, как размер диаграммы становится больше, изменить размер трудно. Я хочу скачать всю диаграмму дерева. По мере увеличения размера древовидной диаграммы загружаемое изображение не показывает полное изображение. Я попытался использовать SVG высоту и ширину, и это бесполезно. Я также пытался получить элемент g в SVG и его размер, но все еще не получил желаемое изображение.

---

Используемые сценарии: - 1. d3.v5.min.js 2. saveSvgAsPng

---

Используемые данные дерева: -

{
"node-v": "A||23",
"name": "A",
"children": [
    {
        "node-v": "B||23.3",
        "name": "B",
        "children": [
            {
                "node-v": "C||673803786739669840",
                "name": "C",
                "children": [
                    {
                        "node-v": "D||-376559623913149976",
                        "name": "D",
                        "parent": null,
                        "type": "APPLICATION SERVER",
                        "key": "-376559623913149976"
                    }
                ],
                "parent": null,
                "type": "APPLICATION",
                "key": "673803786739669840"
            },
            {
                "node-v": "E||-1381480713933961904",
                "name": "E",
                "children": [
                    {
                        "node-v": "F||-376589310727107096",
                        "name": "F",
                        "parent": null,
                        "type": "APPLICATION SERVER",
                        "key": "-376589310727107096"
                    }
                ],
                "parent": null,
                "type": "APPLICATION",
                "key": "-1381480713933961904"
            }
        ],
        "parent": null,
        "type": "BUSINESS",
        "key": "23.3"
    },
    {
        "node-v": "G||23.1",
        "name": "G",
        "children": [
            {
                "node-v": "H||673803786739669840",
                "name": "H",
                "children": [
                    {
                        "node-v": "I||-376559623913149976",
                        "name": "I",
                        "parent": null,
                        "type": "APPLICATION SERVER",
                        "key": "-376559623913149976"
                    }
                ],
                "parent": null,
                "type": "APPLICATION",
                "key": "673803786739669840"
            },
            {
                "node-v": "J||-1381480713933961904",
                "name": "J",
                "children": [
                    {
                        "node-v": "K||-376589310727107096",
                        "name": "K",
                        "parent": null,
                        "type": "APPLICATION SERVER",
                        "key": "-376589310727107096"
                    }
                ],
                "parent": null,
                "type": "APPLICATION",
                "key": "-1381480713933961904"
            },
            {
                "node-v": "L||23.1.1",
                "name": "L",
                "parent": null,
                "type": "BUSINESS",
                "key": "23.1.1"
            },
            {
                "node-v": "M||23.1.2",
                "name": "M",
                "children": [
                    {
                        "node-v": "N||23.1.2.1",
                        "name": "N",
                        "parent": null,
                        "type": "BUSINESS",
                        "key": "23.1.2.1"
                    }
                ],
                "parent": null,
                "type": "BUSINESS",
                "key": "23.1.2"
            }
        ],
        "parent": null,
        "type": "BUSINESS",
        "key": "23.1"
    }
],
"type": "BUSINESS",
"key": "23"}

Ниже используется код: -

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Tree Example</title>

    <style>
        .node {
            cursor: pointer;
        }
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 3px;
        }
        .node text {
            font: 12px sans-serif;
        }
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
        text {
            display: inline-block;
            position: relative;
            padding: 4px;
        }
        image {
            display: inline-block;
            position: relative;
            padding: 4px;
        }
    </style>

</head>

<body>
    <div id="dracula"></div>
    <!-- load the d3.js library -->
    <script src="d3.v5.min.js"></script>
    <script src="saveSvgAsPng"></script>
    <script>
        var treeData = treeMapData[0];

        // Set the dimensions and margins of the diagram
        var margin = {
                top: 20,
                right: 90,
                bottom: 30,
                left: 150
            },
            width = 1360 - margin.left - margin.right,
            height = 600 - margin.top - margin.bottom;

        // append the svg object to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("#dracula").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        d3.select("#dracula").select("svg").call(d3.zoom().scaleExtent([0.8, 3]).on("zoom", zoom));
        //d3.select("#dracula").select("svg").select("g").attr("class", "drawarea");

        var i = 0,
            duration = 50,
            root;

        // declares a tree layout and assigns the size
        var treemap = d3.tree().size([height, width]);

        // Assigns parent, children, height, depth
        root = d3.hierarchy(treeData, function(d) {
            return d.children;
        });
        root.x0 = height / 2;
        root.y0 = 0;

        // Collapse after the second level
        //root.children.forEach(collapse);
        update(root);

        // Collapse the node and all it's children
        function collapse(d) {
            if (d.children) {
                d._children = d.children
                d._children.forEach(collapse)
                d.children = null
            }
        }

        function zoom() {
            svg.attr("transform", d3.event.transform);
        }

        function update(source) {

            // Assigns the x and y position for the nodes
            var treeData = treemap(root);

            // Compute the new tree layout.
            var nodes = treeData.descendants(),
                links = treeData.descendants().slice(1);

            // Normalize for fixed-depth.
            nodes.forEach(function(d) {
                d.y = d.depth * 380
            });

            // ****************** Nodes section ***************************

            // Update the nodes...
            var node = svg.selectAll('g.node')
                .data(nodes, function(d) {
                    return d.id || (d.id = ++i);
                });

            // Enter any new modes at the parent's previous position.
            var nodeEnter = node.enter().append('g')
                .attr('class', 'node')
                .attr("transform", function(d) {
                    return "translate(" + source.y0 + "," + source.x0 + ")";
                })
                .on('click', click);

            // Add Circle for the nodes
            nodeEnter.append('circle')
                .attr('class', 'node')
                .attr('r', 1e-6)
                .style("fill", function(d) {
                    return d._children ? "lightsteelblue" : "#fff";
                });

            // Add labels for the nodes
            nodeEnter.append('text')
                .attr("dy", ".35em")
                .attr("x", function(d) {
                    return d.children || d._children ? -13 : 37;
                })
                .attr("text-anchor", function(d) {
                    return d.children || d._children ? "end" : "start";
                })
                .text(function(d) {
                    return d.data.name;
                });

            // UPDATE
            var nodeUpdate = nodeEnter.merge(node);

            // Transition to the proper position for the node
            nodeUpdate.transition()
                .duration(duration)
                .attr("transform", function(d) {
                    return "translate(" + d.y + "," + d.x + ")";
                });

            // Update the node attributes and style
            nodeUpdate.select('circle.node')
                .attr('r', 10)
                .style("fill", function(d) {
                    return d._children ? "lightsteelblue" : "#fff";
                })
                .attr('cursor', 'pointer');


            // Remove any exiting nodes
            var nodeExit = node.exit().transition()
                .duration(duration)
                .attr("transform", function(d) {
                    return "translate(" + source.y + "," + source.x + ")";
                })
                .remove();

            // On exit reduce the node circles size to 0
            nodeExit.select('circle')
                .attr('r', 1e-6);

            // On exit reduce the opacity of text labels
            nodeExit.select('text')
                .style('fill-opacity', 1e-6);

            // ****************** links section ***************************

            // Update the links...
            var link = svg.selectAll('path.link')
                .data(links, function(d) {
                    return d.id;
                });

            // Enter any new links at the parent's previous position.
            var linkEnter = link.enter().insert('path', "g")
                .attr("class", "link")
                .attr('d', function(d) {
                    var o = {
                        x: source.x0,
                        y: source.y0
                    }
                    return diagonal(o, o)
                });

            // UPDATE
            var linkUpdate = linkEnter.merge(link);

            // Transition back to the parent element position
            linkUpdate.transition()
                .duration(duration)
                .attr('d', function(d) {
                    return diagonal(d, d.parent)
                });

            // Remove any exiting links
            var linkExit = link.exit().transition()
                .duration(duration)
                .attr('d', function(d) {
                    var o = {
                        x: source.x,
                        y: source.y
                    }
                    return diagonal(o, o)
                })
                .remove();

            // Store the old positions for transition.
            nodes.forEach(function(d) {
                d.x0 = d.x;
                d.y0 = d.y;
            });

            // Creates a curved (diagonal) path from parent to the child nodes
            function diagonal(s, d) {
                return "M" + s.y + "," + s.x + "C" + (s.y + d.y) / 2 + "," + s.x + " " + (s.y + d.y) / 2 + "," + d.x + " " + d.y + "," + d.x;
            }

            // Toggle children on click.
            function click(d) {
                if (d.children) {
                    d._children = d.children;
                    d.children = null;
                } else {
                    d.children = d._children;
                    d._children = null;
                }
                update(d);
            }
        }

        d3.select("saveButton")
            .on("click", svgToPng);

        function svgToPng() {
            saveSvgAsPng(d3.select('svg').select('g').node(), 'myDrawing.png', {
                scale: 4,
                backgroundColor: "#FFFFFF"
            });
        }
    </script>

</body>




<div>
    <button id="saveButton"; style="position:  relative; z-index:  2; margin-top: -592px; float:  right; margin-right: 146px;">
        Export my D3 visualization to PNG</button>
</div>

</html>