This example shows how to set the link label based on the column weight, displaying its values with the string "Euro", format the values with 2 decimals and setting the locale property to "DE".
In addition, it shows the transition of the link labels when it is changed from the values of the column weight to the column size.
Acknowledgements:
xxxxxxxxxx
<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>
<body>
<!-- paste data in aside tag -->
<aside id="data">
key,parent,size,weight,color
Eve,,3.45,25,yellow
Cain,Eve,4.647,20.3,black
Seth,Eve,3,20.3,steelblue
Enos,Seth,4,3000,orange
Noam,Seth,50000,30,green
Abel,Eve,4,30,brown
Awan,Eve,3,30,deeppink
Enoch,Awan,7,30,blue
Azura,Eve,2,30,red
</aside>
<script>
const dataSpec = {
source: "aside#data",
};
const myChart = d3.indentedTree(dataSpec)
.linkLabel("weight", {unit: " Euro", format: ",.2f", locale: "DE"})
.linkWidth("weight",{range: [100, 200]})
;
showChart(myChart);
window.setTimeout(function() {
myChart
.linkWidth("size")
.linkLabel("size");
}, 2000);
function showChart(_chart) {
d3.select("body")
.append("div")
.attr("class", "chart")
.call(_chart);
}
</script>
</body>
</html>
Updated missing url https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js to https://cdn.jsdelivr.net/gh/ee2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js
https://d3js.org/d3.v6.min.js
https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js