表示文本字段中最近单击的D3节点

Question

观察这棵美丽的、可折叠的放射状树（不是我的作品）：

http://codepen.io/fernoftheandes/pen/pcoFz

下面是它背后的一小块数据：

var pubs =
{
    "name": "AUT-1",
    "children": [
        {
            "name": "PUB-1","children": [
                {"name": "AUT-11","children": [
                    {"name": "AFF-111"},
                    {"name": "AFF-112"}
                ]},

我想添加一个额外的维度，如ID:

{"name": "AFF-111", id:"aff_111"},

棘手的部分是，我想在文本字段中显示最近单击的节点的ID（如果有）。这有可能吗？还是我正在突破合理D3行为的界限？

干杯，

Sam

Answer 1

您可以在节点点击监听器函数中添加代码，以显示每个节点的id信息。具体而言：

function click(d) {
  d3.select("#text").html("<p>" + d.id + "</p>")
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
 update(d);
}

示例plunkr在这里。（我只为"Pub-6节点"添加了id数据，在源数据中添加"id"后，其他节点也一样）。