Question

在使用d3读取json数据时需要一些帮助。这是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>

我想我面临的问题是尝试获取子数据/节点。我尝试使用像children [i]这样的索引，但是得到了未定义的错误。如何正确遍历所有子节点并将其附加到嵌套到其父节点的列表中？

Answer 1

我真的没有看到为此需要使用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);
        }
    }
}

A working example can be found here.

用d3读取json子节点

1 个答案: