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

标签 javascript d3.js

我正在使用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}
   ]
  }
 ]
}

最佳答案

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

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

关于javascript - 单击 d3 树布局中的链接时访问子节​​点的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31383076/

上一篇：javascript - 从 JSON 转换为 XML 时出现问题

下一篇：javascript - 打开新窗口(选项卡)并保留数据

相关文章：

javascript - 如何将颜色值从一个 div 复制到另一个？

javascript - 在 jQuery 中循环结果

javascript - d3 : color by separate array

javascript - 在 d3.js 中将 div 附加到圆圈

javascript - 动态添加新的 div 但单击事件不适用于新的 div

javascript - 使用 javascript 或 jquery 在 dom 中插入元素

javascript - Jquery each 方法

javascript - 如何删除div内的svg

javascript - d3.js 热图未正确显示数据

javascript - d3 svg 矩形高度变为 NaN

©2024 IT工具网  联系我们