javascript - 根据键值选择根节点

是否可以基于JSON键值选择d3.hierarchy根节点？例如，我希望以下JSON对象中的根节点为“ B1”而不是“ A1”-我需要能够基于name的值访问它

{
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "B1-C1",
          "value": 50
        }
      ]
    }
  ]
}

最佳答案

这里的解决方案涉及纯JavaScript，不需要D3方法。

如您所知，d3.hierarchy ...


  根据指定的层次结构数据构造根节点。指定的数据必须是代表根节点的对象。


话虽如此，您只需要指定正确的对象即可。

例如，使用整个对象（而不是您想要的对象）：

const data = {
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "B1-C1",
          "value": 50
        }
      ]
    }
  ]
};

const root = d3.hierarchy(data);

console.log(root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

现在，让我们获取您想要的对象。这可以通过Array.prototype.find轻松完成：

const root = d3.hierarchy(data.children.find(d => d.name === "B1"));

这是演示：

const data = {
  "name": "A1",
  "children": [{
    "name": "B1",
    "children": [{
      "name": "B1-C1",
      "value": 50
    }]
  }]
};

const root = d3.hierarchy(data.children.find(d => d.name === "B1"));

console.log(root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>