et sous-noeuds reliant à d3.js

Question

Je possède ce format de données:

[{ 
    "name": "node1", 
    "inputs": [{ 
     "name": "input1", 
     "value": 1 
    }, { 
     "name": "input2", 
     "value": 1 
    }], 
    "outputs": [{ 
     "name": "output1", 
     "value": 1 
    }] 
}, { 
    "name": "node2", 
    "inputs": [{ 
     "name": "input1", 
     "value": node1.output1 
    }, { 
     "name": "input2", 
     "value": 1 
    }, { 
     "name": "input3", 
     "value": 1 
    }], 
    "outputs": [{ 
     "name": "output1", 
     "value": 1 
    }] 
}] 

je veux caisse un visualitation d3 montrant chaque nœud comme rect l'intérieur du rect montrer ses entrées et la sortie, puis affiche les liens between entrées et sorties de chaque noeud

im travail dans ce PLUNK http://plnkr.co/edit/bXrcbe?p=preview

premier créer un groupe:

var group = svg.selectAll(".node") 
       .data(graph) 
       .enter().append("g"); 

puis append ses entrées:

var input = group.selectAll(".input") 
       .data(function(d){return d.inputs}) 
       .enter().append("circle") 
       .attr("r", 3) 
       .attr("cx",10) 
       .attr("cy", function(d,i) { return (i+1)*10; }) 

mais maintenant je veux relier les entrées WHT autre entrée de noeud et les données sont sur l'élément du groupe et non dans l'élément d'entrée ...

quelqu'un a une approche pour le faire?

grâce

Answer 1

Vous ne voulez probablement pas faire une autre opération sur les données. Pour créer des liens, il serait probablement préférable de créer un autre attribut sur chaque nœud décrivant les liens dans ce nœud. Vous pouvez soit les pré-définir (utile sinon toutes les entrées dans un nœud connecter à toutes les sorties), ou vous pouvez boucler votre objet et remplir un lien entre chaque entrée et chaque sortie, comme ceci: (pseudocode)

for(i = 0; i < graph.length; i++){ 
    graph[i].links = []; 

    for(j = 0; j < graph.inputs.length){ 
    for(k = 0; k < graph.outputs.length){ 
     graph[i].links.push(linkForInOutPair); 
    } 
    } 
}; 

Avec des liens définis sur chaque nœud, vous pouvez les ajouter de la même manière que vous avez ajouté vos nœuds:

var links = group.selectAll('.link') 
    .data(function(d){ return d.links }) 
    .append('line') //or whatever type of element links should be 
    .classed('.link', true) 
    ... 

en outre, vous ne donnez pas réellement vos entrées de la classe .input en ce moment.