This example shows how to align leaves.
Link to hierarchy explorer on github.
Built with blockbuilder.org
license: mit |
This example shows how to align leaves.
Link to hierarchy explorer on github.
Built with blockbuilder.org
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<script src="https://d3js.org/d3.v5.js"></script> | |
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/EE2dev/hierarchy-explorer/dist/v07/hierarchyExplorer.css"> | |
<script src="https://cdn.jsdelivr.net/gh/EE2dev/hierarchy-explorer/dist/v07/hierarchyExplorer.min.js"></script> | |
</head> | |
<body> | |
<!-- paste data in aside tag --> | |
<aside id="data"> | |
</aside> | |
<script> | |
const dataSpec = { | |
source: "https://cdn.jsdelivr.net/gh/EE2dev/hierarchy-explorer/test/data/flare.json", | |
key: "name", | |
}; | |
const myChart = hierarchyExplorer.chart(dataSpec) | |
.propagateValue("size") | |
; | |
showChart(); | |
window.setTimeout(function() { | |
myChart.alignLeaves(true); | |
}, 2000); | |
function showChart() { | |
d3.select("body") | |
.append("div") | |
.attr("class", "chart") | |
.call(myChart); | |
} | |
</script> | |
</body> | |
</html> |