HTML列表转换为TikZ tree

hbghlyj

1. function convertToTikZTree(ulElement,inside=0) {
2.   let tikzTree = inside ? '' : '\\begin{tikzpicture}\n\\node{Root}';
4.   // Loop through each list item
5.   for (let i = 0; i < ulElement.children.length; i++) {
6.     const liElement = ulElement.children[i];
7.     // Join content of child textnodes
8.     const text = [...liElement.childNodes].map(elm => elm.nodeType == 1?'':elm.textContent.trim()).join('')
10.     // Add node
11.     tikzTree += ' child{node{' + text + '}'
13.     // Check if the node has children
14.     if (liElement.querySelector('ul')) {
15.       // Add child nodes recursively
16.       tikzTree += convertToTikZTree(liElement.querySelector('ul'),1);
17.     }
19.     // Close child
20.     tikzTree += '}'
21.   }
22.   tikzTree += inside ? "" : ";\n\\end{tikzpicture}";
23.   return tikzTree
24. }

Copy the Code

例子

1. const str = '<ul id="nestedList"><li>1<ul><li>1.1</li><li>1.2</li></ul></li><li>2<ul><li>2.1</li><li><ul><li>2.1.1</li><li>2.1.2</li></ul>2.2</li></ul></li></ul>';
2. const parser = new DOMParser();
3. const ulElement = parser.parseFromString(str, 'text/xml').getElementById('nestedList');
4. console.log(convertToTikZTree(ulElement));

Copy the Code

输出

图中1.2和2.1重叠了(因为与Root,1,2组成了▱平行四边形)
添加child[missing]避免重叠:

或加长子树的level distance避免重叠:

或缩短子树的sibling distance避免重叠: