如何从 d3 节点层次结构创建 ul-li 列表？

Question

我有一个 d3 节点层次结构 root-parent-child 我需要将其输出为 ul-li 以便任何具有 d.depth = max(d.depth) 的东西都成为 li 元素，并且它们都被 ul 元素包裹，直到 d.depth = 0，例如

<ul>
  <ul>
     <ul>
       <li>
       <li>
    </ul>
  </ul>
  <ul>
    <li>
    <li>
  </ul>
</ul> ...

我想我必须以某种方式遍历数据并查看是否有子项，如果没有则附加一个 li，否则附加一个 ul...但是如何呢？谢谢！

Answer 1

你可以这样做：

//here chart is the div on which you want to attach the ul and li.
var myDiv = d3.select('#chart')/
.append("ul")//root ul
.append("li")//root li
.text(data.name)//root li name
.append("ul");//to this add ul


//note i am iterating through the data via recursion.
function makeElements(parentDOM, myData){
    myData.children.forEach(function(child){
    //add li element
    parentDOM.append("li").text(child.name);
    //if children then make ul
    if (child.children.length > 0){
        var ul = parentDOM.append("ul");
      //recurse pass ul as parentDOM
      makeElements(ul, child);
    } 
  });
}

工作代码here

如何从 d3 节点层次结构创建 ul-li 列表？

How to create a ul-li list from d3 nodes hierarchy?

javascript

d3.js

nest