| license: mit |
This example shows how to draw a tree with no node images. You have to call myChart.nodeImageSelection(false).
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> | |
| <style> | |
| div.chart { | |
| font-size: 24px; | |
| } | |
| </style> | |
| <body> | |
| <!-- paste data in aside tag --> | |
| <aside id="data"> | |
| key,parent,time,pos | |
| no Nodes,,, | |
| My chessgame,no Nodes,, | |
| 1. e4,My chessgame,3, | |
| 1... c5,My chessgame,10, | |
| 2. Nf3,My chessgame,1, | |
| 2... Nc6,My chessgame,7, | |
| 3. ♗b5,My chessgame,2, | |
| 3.... e6,My chessgame,3, | |
| </aside> | |
| <script> | |
| const dataSpec = { | |
| source: "aside#data", | |
| }; | |
| const myChart = d3.indentedTree(dataSpec) | |
| .margin({top: 50, right: 10, bottom: 20, left: 50}) | |
| .nodeImageSelection(false) | |
| .linkWidth("time") | |
| .linkHeight(30) | |
| ; | |
| showChart(myChart); | |
| function showChart(_chart) { | |
| d3.select("body") | |
| .append("div") | |
| .attr("class", "chart") | |
| .call(_chart); | |
| } | |
| </script> | |
| </body> | |
| </html> |