D3 - konumlandırma kenarları Stephen Thomas <a href="https://github.com/sathomas/jsDataV.is-source/tree/master/ch7/force" rel="nofollow">https://github.com/sathomas/jsDataV.is-source/tree/master/ch7/force</a> gelen kılavuz dayanarak NaN hataları

Question

atma, bir d3 kuvvet düzeni grafiğini çalıştık.

Ancak ben kökenini ve nasıl mücadele bilmiyorum Bir hatayı şaşırıp.

Verilen plunker http://plnkr.co/edit/Bx0qe8DNEsnFgLhkxbfS?p=preview sonrasında bu pasajı neden olan

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

birçok hata örn Hata:

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

bütün neden oluyor Ne: nitelik y2 = "NaN"

Ben aşağıdaki gibi benim kenarları dizi oluşturmak, ancak tam plunker linki kullanınız lütfen sorunu yeniden muktedir için geçersiz değer positionEdge işlevi çağrıldığında NaN hataları atılıyor?

Answer 1

Görünüşe göre, kenarlarınızdaki source ve target alanları, nesnelerden ziyade düğümdür.

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

(aşağıda düzenlemek nota bakın, kötü bir fikir)

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

veya

• kullanım indeksleri:

  • kullanım nesnelerini: İki çözüm olabilir

  d3 standart birinci seçeneği kullanmaktır, ancak bunun için giderseniz kodunuzu getirmek için başka düzenlemeler olabilir. İkinci seçenekte, kenar uç noktaya her ihtiyaç duyduğunuzda düğümleri [d.source] ve düğümleri [d.target] kullanarak sıkışmış olacaksınız.

  ---

  Düzenleme: Aslında force düzen otomatik nesne tabanlı içine dizin tabanlı kenarları dönüştürür. Dolayısıyla, kenarlar için iki farklı dizi kullanmıyorsanız, ilk seçenek için gitmeniz gerekir.