没有孩子的树，没有使用d3的父母

Question

我想创建一个带有空闲节点的.json文件，即没有与之关联的子节点。假设我有一个由.json文件给出的节点相互链接的树

{

"name": "Max",
"value" : 100,
"children": [
{
    "name": "Sylvia",
    "value" : 75,
    "children":[
    {"name": "Craig", "value" : 25},
    {"name": "Robin", "value" : 25},
    {"name": "Anna", "value" : 25}
    ]
},
{
 "name": "David",
 "value" : 75,
 "children": [
 {"name": "Jeff", "value" : 25},
 {"name": "Buffy", "value" : 25}
 ]
},
{
"name": "Mr X",
"value" : 75
}
   ]
}

我想要这样的东西

如何使用D3.js更新.json文件以获取带有空闲节点的上述树？

非常感谢你。

Answer 1

工作示例是here，我猜代码类似。

我添加了一个带有“hidden”标签的根节点：true ，节点Brad和Max处于同一级别。

{
  "name": "",
  "hidden": true,
  "children": [{
    "name": "Brad",
    "value": 100
  }, {
    "name": "Max",
    "value": 100,
    "children": [{
      "name": "Sylvia",
      "value": 75,
      "children": [{
        "name": "Craig",
        "value": 25
      }, {
        "name": "Robin",
        "value": 25
      }, {
        "name": "Anna",
        "value": 25
      }]
    }, {
      "name": "David",
      "value": 75,
      "children": [{
        "name": "Jeff",
        "value": 25
      }, {
        "name": "Buffy",
        "value": 25
      }]
    }, {
      "name": "Mr X",
      "value": 75
    }]
  }]
}

表示隐藏根节点：

nodeUpdate.select("circle")
.attr("r", 6)
.style("fill", function(d) {
  return d._children ? "lightsteelblue" : "#fff";
}).attr("class", function(d) {
  return d.hidden ? "hidden" : "";
});

并且没有创建对角线：

// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", function(d) {
  return "hidden" in d.source ? null : diagonal(d);
});