D3 - 位置決めエッジでNaNエラーが発生する

Question

Stephen Thomasのガイドhttps://github.com/sathomas/jsDataV.is-source/tree/master/ch7/forceに基づいて、d3 forceレイアウトグラフを作成しようとしました。

しかし私は、私がその起源とそれに取り組む方法を知らないという間違いで立ち往生しています。

考えるplunker 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; }); 
    }; 

多くのエラー例えばエラー：すべての原因は何

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

：=「NaNの」

属性Y2の値が無効です、私は次のように私のエッジの配列を構築しますが、完全に問題を再現できるようにするには、plunkerのリンクをご利用くださいpositionEdge関数が呼び出されたときにNaNエラーがスローされますか？

Answer 1

エッジのフィールドは、オブジェクトではなくノード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; }); 
  }; 
  

次の2つのソリューションを持っています

d3の標準は、最初のオプションを使用することですが、もしあなたがそれに行くなら、あなたのコードにもたらす他の編集があるかもしれません。 2番目のオプションでは、エッジエンドポイントが必要なたびに、ノード[d.source]とノード[d.target]を使用することに固執します。

---

編集：実際、forceレイアウトが自動的にオブジェクトベースのインデックスベースのエッジを変換します。したがって、2つの異なる配列をエッジに使用しない限り、最初のオプションに進む必要があります。