Javascript 无法读取未定义的-D3配置单元绘图的属性

我一直在尝试为蛋白质相互作用数据创建一个蜂巢图。当我运行这段代码（工作进行中）时，没有配置单元图；此外，web检查器显示错误：“无法读取未定义的属性‘type’。”

*当我在“绘制链接”部分中将代码更改为nodes.type、nodes.position、links.SourceNode.type时，它会抛出一个奇怪的错误，以及前面的错误：

错误：属性d=“MNaN，NaNCNaN，NaN-NaN，NaN-NaN，NaN”samplehiveplot.html的值无效：1 未捕获的TypeError:无法读取未定义的属性“type”*

.安讯士{
行程：#000；
笔划宽度：1.5px；
}
.节点{
行程：#000；
}
.链接{
填充：无；
笔划宽度：1.5px；
笔划不透明度：0.8；
}
.林克·特纳顿{
笔画宽度：3px；
}
.link.关掉{
笔划不透明度：0.3；
笔画宽度：1px；
}
.node.turnedOn{
笔画：红色；
笔画宽度：3px；
}
可变宽度=1000，
高度=1000，
内半径=20，
外层=240；
变量角度=d3.scale.ordinal（）
.域（d3.范围（4））
.rangePoints（[0,2*Math.PI]），
半径=d3.刻度.线性（）
.范围（[内半径，外半径]，
颜色=d3.scale.category10（）
.域（d3.范围（20））；
变量节点=[{“编号”：1，“类型”：0，“位置”：0.1，“名称”：“TFC3”，“组”：“yal001c”}，
{“编号”：2，“类型”：2，“位置”：0.1003，“名称”：“SSA1”，“组”：“yal005c”}，
{“编号”：3，“类型”：2，“位置”：0.1006，“名称”：“TPD3”，“组”：“yal016w”}，
{“编号”：4，“类型”：2，“位置”：0.1009，“名称”：“CCR4”，“组”：“yal021c”}，
{“编号”：5，“类型”：2，“位置”：0.1012，“名称”：“PMT2”，“组”：“yal023c”}，
{“编号”：6，“类型”：2，“位置”：0.1015，“名称”：“LTE1”，“组”：“yal024c”}，
{“编号”：7，“类型”：2，“位置”：0.1018，“名称”：“YAL028W”，“组”：“YAL028W”}，
{“数字”：8，“类型”：2，“位置”：0.1021，“名称”：“MYO4”，“组”：“yal029c”}，
{“编号”：9，“类型”：2，“位置”：0.1024，“名称”：“SNC1”，“组”：“yal030w”}，
{“数字”：10，“类型”：1，“位置”：0.1027，“名称”：“FUN20”，“组”：“yal032c”}，
{“编号”：11，“类型”：0，“位置”：0.103，“名称”：“YAL034W-A”，“组”：“YAL034W-A”}
];
变量链接=[
{“SourceNode”：节点[1]，“TargetNode”：节点[35]}，
{“SourceNode”：节点[1]，“TargetNode”：节点[856]}，
{“SourceNode”：节点[1]，“TargetNode”：节点[1647]}，
{“SourceNode”：节点[1]，“TargetNode”：节点[2009]}，
{“SourceNode”：节点[1]，“TargetNode”：节点[2024]}，
{“SourceNode”：节点[2]，“TargetNode”：节点[234]}，
{“SourceNode”：节点[2]，“TargetNode”：节点[1376]}，
{“SourceNode”：节点[2]，“TargetNode”：节点[1488]}，
{“SourceNode”：节点[3]，“TargetNode”：节点[671]}
];
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
svg.selectAll（“.axis”）
.数据（d3.范围（3））
.enter（）.append（“行”）
.attr（“类”、“轴”）
.attr（“变换”，函数（d）{return“旋转”（+度（角度（d））+”））}）
.attr（“x1”，半径.range（）[0]）
.attr（“x2”，半径范围（）[1]）；
//绘制链接
svg.selectAll（“.link”）
.数据（链接）
.enter（）.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，d3.hive.link（）
.angle（函数（d）{返回角（d.type）；}）
.半径（函数（d）{返回半径（d位置）；}）
.style（“笔划”，函数（d）{返回颜色（d.SourceNode.type）；}）
.on（“鼠标悬停”，链接鼠标悬停）
.on（“mouseout”，mouseout）；
//绘制节点
svg.selectAll（“.node”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“变换”，函数（d）{return“旋转”（+度（角度（d.type））+”）；}）
.attr（“cx”，函数（d）{返回半径（d.position）；}）
.attr（“r”，5）
.style（“fill”，函数（d）{返回颜色（d.type）；}）
.on（“鼠标悬停”，nodeMouseover）
.on（“mouseout”，mouseout）；
//在鼠标上方突出显示链接和连接的节点
函数linkMouseover（d）{
svg.selectAll（“.link”）
.classed（“turnedOn”，功能（dl）{
返回dl==d；
})
.分类（“关闭”，功能（dl）{
返回！（dl==d）；
})
svg.selectAll（“.node”）
.classed（“turnedOn”，功能（dl）{
返回dl==d.SourceNode | | dl==d.TargetNode；
})
}
//在鼠标上方突出显示节点和连接的链接
函数nodeMouseover（d）{
svg.selectAll（“.link”）
.classed（“turnedOn”，功能（dl）{
返回dl.SourceNode==d | | dl.TargetNode==d；
})
.分类（“关闭”，功能（dl）{
返回！（dl.SourceNode==d | | dl.TargetNode==d）
});
d3.选择（本）
.分类（“turnedOn”，真实）；
}
//清除高亮显示的节点或链接
函数mouseout（）{
svg.selectAll（“.turnedOn”）.classed（“turnedOn”，false）；
svg.selectAll（“.turnedOff”）.classed（“turnedOff”，false）；
}
函数度（弧度）{
返回弧度/Math.PI*180-90；
}

问题在于您的输入链接。首先，

链接

应该是

对象

的

数组

，其中每个

对象

都有一个

“源”

和

“目标”

字段（与

“源节点”

和

“目标节点”

相反）。接下来，通过索引到

节点

数组

来定义链接，但许多索引远远大于节点的长度，从而导致其他问题。我不确定您在那里想做什么，但如果您更改

链接

，如下所示：

var links = [
{source: nodes[1], target: nodes[3]},
{source: nodes[1], target: nodes[4]},
{source: nodes[1], target: nodes[5]},
{source: nodes[1], target: nodes[6]},
{source: nodes[1], target: nodes[7]},
{source: nodes[2],target: nodes[3]},
{source: nodes[2],target: nodes[4]},
{source: nodes[2],target: nodes[5]},
{source: nodes[3],target: nodes[6]}
];

并将对

d.sourceNode

的引用更改为

d.source

和

d.targetNode

更改为

d.target

，您将获得以下输出：

---

谢谢。将SourceNode和TargetNode更改为source和target有效。数据共有2114个节点；由于空间问题，我没有在片段中全部提到。抱歉，如果这引起了任何混乱。我以为我一开始就提到了。@Minu:啊，有道理。如果你觉得我的答案解决了你的问题，你可以。当然我会看看你的