我正在使用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}
]
}
]
}
答案 0 :(得分：1)
如果您在d函数中记录.on("click",的值，您会看到d是包含两个属性source和target的对象。因此，如果要访问链接的“子”对象的数据，可以使用d.target访问它。因此，要记录子项的名称，请将函数更改为：
.on("click", function(d){
console.log('Clicked : ' + d.target.name);
});