Javascript D3-边缘定位存在错误

根据Stephen Thomas的指南，我尝试制作d3部队布局图

然而，我陷入了一个错误，我不知道它的起源和如何解决它

鉴于以下情况，此代码段将导致

 var positionEdge = function(edge, nodes) {
        edge.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });
    };

许多错误，例如错误：属性y2=“NaN”的值无效

我按照以下方式构建边缘阵列，但要完全重现问题，请使用plunker链接：

 var edges = [];
        links.forEach(function(srcLink){
            var targetNodeId;
            var targetNodeName;
            var sourceNodeId;
            var sourceNodeName;

            nodes.forEach(function(srcNode){
              if(srcNode.label === srcLink.source){
                  sourceNodeId = srcNode.id;
                  sourceNodeName = srcNode.label;
              } else if(srcNode.label === srcLink.target){
                  targetNodeId = srcNode.id;
                  targetNodeName = srcNode.label;
              }
            })
            edges.push({
                "id": "From_" + sourceNodeName + "_To_" + targetNodeName,
                "target": targetNodeId,
                "source": sourceNodeId
            });
        })

        // remove duplicate edges
        var arr = {};
        for ( var i=0, len=edges.length; i < len; i++ )
            arr[edges[i]['id']] = edges[i];

        edges = new Array();
        for ( var key in arr )
            edges.push(arr[key]);

var-edges=[]；
forEach（函数（srcLink）{
var-targetNodeId；
var targetNodeName；
var-sourceNodeId；
var-sourceNodeName；
forEach（函数（srcNode）{
if（srcNode.label==srcLink.source）{
sourceNodeId=srcNode.id；
sourceNodeName=srcNode.label；
}else if（srcNode.label==srcLink.target）{
targetNodeId=srcNode.id；
targetNodeName=srcNode.label；
}
})
推({
“id”：“从”+源节点名+“\u到”+目标节点名，
“目标”：targetNodeId，
“源”：sourceNodeId
});
})
//删除重复的边
var arr={}；
对于（变量i=0，len=edges.length；i

---

调用positionEdge函数时引发所有NaN错误的原因是什么？

边缘中的

源
和
目标
字段似乎是节点ID，而不是对象。您有两种解决方案：


使用对象：

   edges.push({
        "id": "From_" + sourceNodeName + "_To_" + targetNodeName,
        "target": nodes[targetNodeId],
        "source": nodes[sourceNodeId]
    });



或


使用索引（坏主意，请参见下面的编辑注释）



d3
中的标准是使用第一个选项，但如果您选择它，可能会对代码进行其他编辑。在第二个选项中，每次需要边缘端点时，都会使用节点[d.source]和节点[d.target]


编辑：实际上，
强制
布局会自动将基于索引的边转换为基于对象的边。因此，除非对边使用两个不同的数组，否则需要使用第一个选项
 非常感谢你，劳伦特。我选择了你给我的第二个选项，因为使用第一个选项会导致完全相同的错误（可能是因为你注意到需要进行其他编辑）。使用第二个选项，我不再看到打开主题时出现的错误。因此，我将把你的回答作为我问题的答案。但是，如果您愿意看看更新的plunker示例，我将非常感谢。我得到属性transform=“translate（NaN，NaN）”的
无效值。
错误@Sander_M：我完全忘记了使用第一个选项不仅是标准，而且实际上是由
d3.force
（参见编辑）强制执行的。很抱歉误导您。听到选项2无效，我很难过；）我将接受你的建议，将对象用作目标和源。可能意味着我必须重新开始。非常适合我的学习曲线，我非常喜欢D3的数据可视化。尽管它感觉比sigma.js更复杂，但它也提供了更多的选项和可能性。谢谢你的清理和编辑！
var positionEdge = function(edge, nodes) {
    edge.attr("x1", function(d) { return nodes[d.source].x; })
        .attr("y1", function(d) { return nodes[d.source].y; })
        .attr("x2", function(d) { return nodes[d.target].x; })
        .attr("y2", function(d) { return nodes[d.target].y; });
};