Domain cut in SVG - Githubissues

Nilad commented 5 years ago

Hi,

First thank for this pretty scalable tool in D3.

At the load of the graph the domains are cut like that...

...

Of course in the page it's not a problem (you can move the graph as you want) but it is one for the export in svg or png format.

HTML code

    <head>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <link rel="stylesheet" href="{% static 'css/phyd3/phyd3.min.css' %}" />
        <script src="{% static 'js/phyd3/phyd3.min.js' %}"></script>

        <script>

               var opts = {
               domainWidth:20,
                    margin:20,
                    dynamicHide: true,
                    height: 2000,
                    invertColors: false,
                    lineupNodes: true,
                    showDomains: true,
                    showDomainNames: false,
                    showDomainColors: true,
                    showGraphs: true,
                    showGraphLegend: true,
                    showSupportValues: false,
                    maxDecimalsSupportValues: 1,
                    showLengthValues: false,
                    maxDecimalsLengthValues: 3,
                    showLength: false,
                    showNodeNames: true,
                    showNodesType: "all",
                    showPhylogram: false,
                    showTaxonomy: true,
                    showFullTaxonomy: true,
                    showSequences: false,
                    showTaxonomyColors: true,
                    backgroundColor: "#f5f5f5",
                    foregroundColor: "#000000",
                };

                function load() {
                    d3.xml("{% static 'test.xml' %}", function(xml) {
                        var tree = phyd3.phyloxml.parse(xml);
                        phyd3.phylogram.build("#phyd3", tree, opts);
                    });
                };
        </script>
    </head>

    <body onload="load()">

<div id="phyd3">
        </div>

           <div class="row">
                Download as:
                <button class="btn btn-primary" id="linkSVG">SVG</button>
                <button class="btn btn-primary" id="linkPNG">PNG</button>
                <a href="submissions/91162629d258a876ee994e9233b2ad87" class="btn btn-primary" id="linkXML" download >XML</a>
            </div>

    </body>

Thank in advance for any help.

MaybeJustJames commented 3 years ago

Hi @Nilad , Thanks for the report. Could you please provide some more details about what you expect to see?

Nilad commented 3 years ago

The problem seems to be that the graph is too huge (with long header column name) to have a correct display. Which details do you want ?

MaybeJustJames commented 3 years ago

Ah ok I see what you mean. Thanks for clarifying.

vibbits / phyd3

Domain cut in SVG #5

HTML code