Skip to content

Domain cut in SVG #5

Description

@Nilad

Hi,

First thank for this pretty scalable tool in D3.

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

image

...

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions