javascript - D3 - 定位边缘抛出 NaN 错误

Question

基于 Stephen Thomas 的指南 https://github.com/sathomas/jsDataV.is-source/tree/master/ch7/force ，我尝试制作一个d3力布局图。

但是我遇到了一个错误，我不知道其根源以及如何解决它。

鉴于以下骗子 http://plnkr.co/edit/Bx0qe8DNEsnFgLhkxbfS?p=preview此片段导致

 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]);

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

Answer 1

边缘中的 source 和 target 字段似乎是节点 ID，而不是对象。您有两种解决方案:

• 使用对象:

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

或

• 使用索引(坏主意，请参阅下面的编辑注释)

  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; });
  };
  

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

<小时/>

编辑:实际上，force 布局会自动将基于索引的边缘转换为基于对象的边缘。因此，除非您使用两个不同的数组作为边，否则您需要选择第一个选项。