在d3树布局中单击链接时访问子节​​点的数据

Question

我正在使用d3 collapsible tree 示例。

我想访问与单击链接时调用的函数中的链接关联的子节点的“名称”。到目前为止，我已经这样做了。

// Enter any new links at the parent's previous position.
          link.enter().insert("path", "g")
              .attr("class", "link")
              .attr("d", function(d) {
                var o = {x: source.x0, y: source.y0};
                return diagonal({source: o, target: o});
              })
              .on("click", function(d){
                  console.log('Clicked : ' + d.name);
              });

在控制台中“未定义”正在打印。

Json数据

    {
 "name": "A",
 "children": [
  {
   "name": "B",
   "children": [
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 3938},
      {"name": "D", "size": 3812},
      {"name": "D", "size": 6714},
      {"name": "D", "size": 743}
     ]
    },
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 3534},
      {"name": "D", "size": 5731},
      {"name": "D", "size": 7840},
      {"name": "D", "size": 5914},
      {"name": "D", "size": 3416}
     ]
    },
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 7074}
     ]
    }
   ]
  },
  {
   "name": "C",
   "children": [
    {"name": "D", "size": 17010},
    {"name": "D", "size": 5842},
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 1983},
      {"name": "D", "size": 2047},
      {"name": "D", "size": 1375},
      {"name": "D", "size": 8746},
      {"name": "D", "size": 2202},
      {"name": "D", "size": 1382},
      {"name": "D", "size": 1629},
      {"name": "D", "size": 1675},
      {"name": "D", "size": 2042}
     ]
    },
    {"name": "C", "size": 1041},
    {"name": "C", "size": 5176},
    {"name": "C", "size": 449},
    {"name": "C", "size": 5593},
    {"name": "C", "size": 5534},
    {"name": "C", "size": 9201},
    {"name": "C", "size": 19975},
    {"name": "C", "size": 1116},
    {"name": "C", "size": 6006}
   ]
  },
  {
   "name": "B",
   "children": [
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 721},
      {"name": "D", "size": 4294},
      {"name": "D", "size": 9800},
      {"name": "D", "size": 1314},
      {"name": "D", "size": 2220}
     ]
    },
    {"name": "C", "size": 1759},
    {"name": "C", "size": 2165},
    {"name": "C", "size": 586},
    {"name": "C", "size": 3331},
    {"name": "C", "size": 772},
    {"name": "C", "size": 3322}
   ]
  },
  {
   "name": "B",
   "children": [
    {"name": "D", "size": 8833},
    {"name": "D", "size": 1732},
    {"name": "D", "size": 3623},
    {"name": "D", "size": 10066}
   ]
  },
  {
   "name": "A",
   "children": [
    {"name": "D", "size": 4116}
   ]
  },
  {
   "name": "B",
   "children": [
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
   ]
  },
  {
   "name": "query",
   "children": [
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
   ]
  },
  {
   "name": "B",
   "children": [
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
   ]
  },
  {
   "name": "B",
   "children": [
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
   ]
  },
  {
   "name": "B",
   "children": [
    {
     "name": "C",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {"name": "B", "size": 1286},
      {
       "name": "C",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "C", "size": 16540}
   ]
  }
 ]
}

Answer 1

如果您在d函数中记录.on("click",的值，您会看到d是包含两个属性source和target的对象。因此，如果要访问链接的“子”对象的数据，可以使用d.target访问它。因此，要记录子项的名称，请将函数更改为：

.on("click", function(d){
    console.log('Clicked : ' + d.target.name);
});