Domain cut in SVG #5
Description
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.