| license: mit |
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:
| <!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> | |
| <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> |
