0

我正在尝试使用以下示例使用 d3 构建图表：http: //bl.ocks.org/jhb/5955887

是我第一次尝试使用 d3 库，并且尝试使用来自我的数据库的数据设置节点，这是我要构建的节点的示例：

{
  index: 700,
  name: 'The person's name'
}

来自节点的数据来自一个名为“研究人员”的 MySql 表，只不过是一个包含 id 和姓名的人员列表： 在此处输入图像描述

如您所见，每个研究人员都有一个相关数组，其中包含所有相关研究人员，这将用于构建边缘。下面是设置图边和节点的代码：

const g_nodes = [];
const g_edges = [];
/*For each researcher, set the edges related to that researcher*/
this.state.nodes.forEach(n => {
  if (n.related.length > 0) {
    n.related.forEach(r => {
      g_edges.push({
        source: n.id,
        target: r.id,
        weight: r.RelatedResearcher.cs + r.RelatedResearcher.bc
      });
    })
  }
})
/*For each researcher set his/her node on the graph*/
this.state.nodes.forEach(n => {
  g_nodes.push({
    index: n.id,
    name: n.name
  });
})
console.log(g_edges);
console.log(g_nodes);

这张图片来自 console.log(g_nodes) 并按预期工作： 在此处输入图像描述

问题是，只要我将边和节点放入数据集对象，节点的索引就会更改为数组位置，并且权重字段会出现在节点对象上：

dataset.nodes = g_nodes;
dataset.edges = g_edges;
console.log(g_edges);
console.log(g_nodes);

在此处输入图像描述

发生这种情况时，我从 d3 收到一个错误：

TypeError: "r.source is undefined"

然后我查看边缘，第一个边缘接收到源和目标的未定义：

0: Object { source: undefined, target: undefined, weight: 0.46782460000000003 }

对不起我的英语，希望你能帮忙。谢谢

4

0 回答 0