如何使用d3编辑树状结构数据

时间:2019-05-06 02:30:38

标签: javascript arrays object d3.js

let treeData = {
  "name": "Top Level",
  "parent": "null",
  "children": [
    {
      "name": "Level 2: A",
      "parent": "Top Level",
      "children": [
        {
          "name": "Son of A",
          "parent": "Level 2: A"
        },
        {
          "name": "Daughter of A",
          "parent": "Level 2: A"
        }
      ]
    },
    {
      "name": "Level 2: B",
      "parent": "Top Level"
    }
  ]
}

我想将孩子添加到“级别2:B”。我尝试了层次结构功能,但是这并不能帮助我更新原始的treeData,因此可以通过将子级附加到所需的节点来重新渲染整个树。

d3.hierarchy(treeData, function(d) {
  return d.children;
});

预期结果是

let treeData = {
  "name": "Top Level",
  "parent": "null",
  "children": [
    {
      "name": "Level 2: A",
      "parent": "Top Level",
      "children": [
        {
          "name": "Son of A",
          "parent": "Level 2: A"
        },
        {
          "name": "Daughter of A",
          "parent": "Level 2: A"
        }
      ]
    },
    {
      "name": "Level 2: B",
      "parent": "Top Level",
      "children": [
         {"name": "Level 3: C", 
          "parent": "Level 2: B"
         }
      ]
    }
  ]
}

我的要求是借助d3 js更新原始treeData。因此,我可以使用更新的treeData重新渲染树以查看最新数据。

谢谢

0 个答案:

没有答案