Skip to content

Instantly share code, notes, and snippets.

@EE2dev

EE2dev/.block

Last active August 23, 2021 19:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save EE2dev/62d28e7f41a5c37cdfef99a021a42972 to your computer and use it in GitHub Desktop.
Save EE2dev/62d28e7f41a5c37cdfef99a021a42972 to your computer and use it in GitHub Desktop.
Download ZIP
d3-indented-tree API example #1
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.css">
</head>
<style>
div.text{
font-size: 48px;
color: grey;
padding-left: 50px;
}
</style>
<body>
<!-- paste data in aside tag -->
<aside id="data">
</aside>
<div class="text">See one-liners for each transition</div>
<script>
const dataSpec = {
source: "https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/data/flare.json",
key: "name",
};
const myChart = d3.indentedTree(dataSpec)
.propagateValue("size")
;
showChart(myChart);
const myFunctions = [];
myFunctions.push({function: () => myChart.linkHeight(50), text: 'myChart.linkHeight(100)'});
myFunctions.push({function: () => myChart.linkHeight(20), text: 'myChart.linkHeight(20)'});
myFunctions.push({function: () => myChart.linkStrength(8), text: 'myChart.linkStrength(8)'});
myFunctions.push({function: () => myChart.linkStrength("size"), text: 'myChart.linkStrength("size")'});
myFunctions.push({function: () => myChart.alignLeaves(true), text: 'myChart.alignLeaves(true)'});
myFunctions.push({function: () => myChart.alignLeaves(false), text: 'myChart.alignLeaves(false)'});
myFunctions.push({function: () => myChart.linkWidth("size", {scale: d3.scaleLog(), range: [20, 100]}), text: 'myChart.linkWidth("size", {scale: d3.scaleLog(), range: [20, 100]})'});
myFunctions.push({function: () => myChart.linkWidth(50), text: 'myChart.linkWidth(50)'});
let counter = 0;
const sel = d3.select(".text");
window.setInterval(function(){
myFunctions[counter % myFunctions.length].function();
sel.text(myFunctions[counter % myFunctions.length].text);
counter = counter + 1;
}, 3000);
function showChart(_chart) {
d3.select("body")
.append("div")
.attr("class", "chart")
.call(_chart);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment