d3 forceレイアウトでリンクを自動的に生成する

Question

D3.jsのforceレイアウトを使用しています。リンクをノードデータに基づいて自動的に生成しようとしています。ノードは既に予想どおりに表示されます。それは言う

{ 
"id": 1, 
"title": "name" 
}, 
{ 
"id": 2, 
"title": "other name", 
"primaryDependants": 1 
} 

と私は基本的に持ってしようとしています：

「の各ノードのために、それはprimaryDependant性質を持っている場合、それがあれば、チェック

データベースのJSON文字列は次の形式を使用します。そのノードと主従属として識別されたノードとの間のリンクを作成します。

しかし私は力のグラフを扱っていませんし、チュートリアルもそれほどではありませんので、私はそれを壊さずにコードを変更する方法に本当に苦労しています。現時点ではthe answer hereに基づいており、関連性がある場合はMeteorフレームワークを使用しています。

Template.tree.rendered = function() { 

    var graph = new myGraph("#svgdiv"); 

    Lessons.find().observe({ 
    added: function (doc) { 
     graph.addNode(doc._id, doc.title); 
    }, 
    removed: function (doc) { 
     graph.removeNode(doc._id); 
    } 
    }); 

function myGraph(el) { 

    w = 1500, 
    h = 1000; 

    var svg = d3.select(el) 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h) 
    .attr("pointer-events", "all") 

    svg.append("rect") 
    .attr("width", "100%") 
    .attr("height", "100%") 
    .attr("fill", "lightgrey"); 

    var vis = svg.append('g'); 
    var force2 = d3.layout.force(); 
    var links = force2.links(); 
    var nodes = force2.nodes(); 

    var update = function() { 

    var link = vis.selectAll("line") 
     .data(links, function(d) {return d.source.id + "-" + d.target.id;}); 

    link.enter().append("line") 
     .attr("id",function(d){return d.source.id + "-" + d.target.id;}) 
     .attr("class","link"); 

    link.append("title") 
    .text(function(d){ 
     return d.value; 
    }); 

    link.exit().remove(); 

    var node = vis.selectAll("g") 
     .data(nodes, function(d) { return d.id;}); 

    var nodeEnter = node.enter() 
     .append("g") 
     .call(force2.drag) 
     .append("circle") 
     .attr("r", 8) 
     .attr("fill", "#585858") 
     .attr("stroke", "#008db7") 
     .attr("stroke-width", 3) 
     .attr("id", function(e) { return "Node;"+e.id;}) 
     .attr("class", (function(f){return f.id;})); 

    node.exit().remove(); 

    force2.on("tick", function() { 
     node.attr("transform", function(g) { return "translate(" + g.x + "," + g.y + ")"; }); 

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

    force2 
     .gravity(.02) 
     .linkDistance(200) 
     .size([w, h]) 
     .start(); 
    }; 

    update(); 

    var findNode = function(id) { 
    for (var i in nodes) { 
     if (nodes[i]["id"] === id) return nodes[i];}; 
    }; 

    var findNodeIndex = function(id) { 
    for (var i=0;i<nodes.length;i++) { 
     if (nodes[i].id==id){ 
     return i; 
     } 
    }; 
    }; 

    this.addNode = function (id, title) { 
    nodes.push({"id":id,"title":title}); 
    update(); 
    }; 

    this.addLink = function (source, target, value) { 
    links.push({"source":findNode(source),"target":findNode(target),"value":value}); 
    update(); 
    }; 

    this.removeNode = function (id) { 
    var i = 0; 
    var n = findNode(id); 
    nodes.splice(findNodeIndex(id),1); 

    update(); 
    }; 
} 

Answer 1

あなたの説明に基づいてlinks配列を作成するには、次の応答のための

var dataset = [{ 
 
"id": 1, 
 
"title": "name" 
 
}, 
 
{ 
 
"id": 2, 
 
"title": "other name", 
 
"primaryDependants": 1 
 
}]; 
 

 
var links = []; 
 

 
dataset.forEach(function(d){ 
 
    if(d.primaryDependants){ 
 
    links.push({source: d.id, 
 
       target: d.primaryDependants}); 
 
    }}); 
 

 
console.log(links)