根据键值选择根节点

Question

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

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

Answer 1

这里的解决方案涉及纯 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>