用d3读取json子节点

Read json children nodes with d3

本文关键字：子节点 json 读取 d3      更新时间：2023-09-26

需要一些帮助读取json数据与d3。这是json

{
  "name": "Main Course",
  "children": [
    {
      "name": "Chinese",
      "children": [
        {"name": "Noodles"},
        {"name": "Rice"},
        {"name": "Xinjiang Roast"}
      ]
    },
    {
      "name": "Indian",
      "children": [
        {"name": "Rice"},
        {"name": "Paratha"},
        {"name": "Dal Fry"}
      ]
    }
  ]
}

我想从这些数据中创建一个列表，如下所示，

<ul>
<li>Main Course</li>
  <ul>
  <li>Chinese</li>
    <ul>
    <li>Noodles</li>
    <li>Rice</li>
    <li>Xinjiang Roast</li>
    </ul>
  <li>Indian</li>
    <ul>
    <li>Rice</li>
    <li>Paratha</li>
    <li>Dal Fry</li>
    </ul>
  </ul>
</ul>

这就是我被卡住的地方，

d3.select("body")
        .append("ul")
        .selectAll("li")
        .data(data)
        .enter()
        .append("li")
        .attr("id","mylist")
        .text(function (d) {
        return d.name;
        })
 d3.select("#mylist")
        .append("ul")
        .selectAll("li")
        .data(data)
        .enter()
        .append("li")
        .text(function (d) {
        return d.children[0].name;
        })
      }

它给出了下面的结果，

<ul>
<li id="mylist">Main Course<ul>
<li>Chinese</li>
</ul>
</li>
</ul>

我想我面临的问题是试图得到孩子的数据/节点。我尝试使用索引像儿童[I]，但得到未定义的错误。如何正确地循环遍历所有子节点并将其附加到嵌套到父节点的列表中?

我真的不认为需要使用d3。

试试这个:

function makeMenu(jsonObj, container) {
    container = container || document.body;
    var ul = document.createElement('ul');
    var li = document.createElement('li');
    li.innerHTML = jsonObj.name;
    ul.appendChild(li);
    container.appendChild(ul);
    if(jsonObj.children) {
        for(var i=0; i<jsonObj.children.length; i++) {
            li = document.createElement('li');
            makeMenu(jsonObj.children[i], li);
            ul.appendChild(li);
        }
    }
}

相关文章：