This example shows how to set the height of the links.
- for documentation, go to https://github.com/EE2dev/hierarchy-explorer
- for other examples, go to https://github.com/EE2dev/hierarchy-explorer#examples
Acknowledgements:
| license: mit |
This example shows how to set the height of the links.
Acknowledgements:
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/gh/EE2dev/hierarchy-explorer/dist/v10/hierarchyExplorer.js"></script> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/EE2dev/hierarchy-explorer/dist/v10/hierarchyExplorer.css"> | |
| </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") | |
| .linkHeight(15) | |
| ; | |
| showChart(); | |
| window.setTimeout(function() { | |
| myChart.linkWidth(100); | |
| }, 2000); | |
| function showChart() { | |
| const selection = d3.select("body") | |
| .append("div") | |
| .attr("class", "chart"); | |
| selection.call(myChart); | |
| } | |
| </script> | |
| </body> | |
| </html> |