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

Question

我有一个d3节点的根-父-父-子层次结构，需要以ul-li的形式输出，这样任何具有d.depth = max( d.depth )的节点都会变成li元素，并且它们都被ul元素封装到d.depth= 0。

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

我想我必须以某种方式迭代数据，看看是否有孩子，如果没有附加安莉，否则就追加一个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);
    } 
  });
}

工作代码这里