phyd3
phyd3 copied to clipboard
Published
20 hours ago •
vibbits
vibbits
Domain cut in SVG
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.
Hi @Nilad , Thanks for the report. Could you please provide some more details about what you expect to see?
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 ?