Javascript 未捕获类型错误：无法读取属性'；名字'；通过创建图形来定义未定义的

我正试图用我创建的Javascript代码创建一个有向图。通过单击某个节点，应调用分配给关键字的出版物列表。当前选定的节点应在可视化中突出显示。详细信息应显示在我创建的单独灰色区域中：

  <div id="detail_box"></div>

如果单击这些节点：它将在我的“详细框”中显示这些数据：

我怎么做这个？我尝试过，但不幸的是，我收到了一条错误消息：

index.html:147 Uncaught TypeError: Cannot read property 'firstname' of undefined
    at SVGCircleElement.<anonymous> (index.html:147)
    at SVGCircleElement.<anonymous> (d3.v6.js:2107)

index.html:147未捕获类型错误：无法读取未定义的属性“firstname”
在SVGCircleElement。（index.html:147）
在SVGCircleElement。（d3.v6.js:2107）

以下是我的代码->我正在使用D3.js V6：

  <script src="https://d3js.org/d3.v6.js"></script>
  <script src="persona.js"></script>

该错误意味着

角色[keyName]

未定义。我们没有得到

persona

array的声明来进行更好的研究。

thx。我已经调整了我的代码（上面也进行了编辑）。但不幸的是，我有点不对劲。它不输出名字、姓氏和出生日期，只输出整个关键字。这是当我点击一个节点时它的输出：

KayO；本贝克；博雷亚。只有当我点击这一个文本时，数据才会出现。我怎样才能改变这个？你还知道错误吗？另外，试着打印整个
角色
数组，以确保里面的一切都是正确的。不，我没有收到错误消息
index.html:147 Uncaught TypeError: Cannot read property 'firstname' of undefined
    at SVGCircleElement.<anonymous> (index.html:147)
    at SVGCircleElement.<anonymous> (d3.v6.js:2107)

  <script src="https://d3js.org/d3.v6.js"></script>
  <script src="persona.js"></script>