节点和子节点在D3.js

Question

联我有这样的数据格式：

[{ 
    "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 
    }] 
}] 

我想箱示出每个节点作为一个矩形矩形的内侧显示他的输入端和输出端的D3 visualitation然后显示链接中间人每个节点

1M，在此它的工作的输入和输出的普拉克http://plnkr.co/edit/bXrcbe?p=preview

第一i-创建组：

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

个

然后追加其输入：

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

，但现在我想输入WHT其他节点的输入和数据是不是在输入元素的组元素和链接...

人有没有办法做到这一点？

谢谢

Answer 1

您可能不希望对数据进行其他操作。为了创建链接，最好在描述该节点链接的每个节点上创建另一个属性。您可以预先定义它们（如果不是所有输入都连接到所有输出，那么可以使用），或者您可以遍历您的对象并在每个输入和每个输出之间填充链接，如下所示：（伪代码）

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

与每个节点上定义的链接，你可以将它们添加相同的方式，您添加您的节点：

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

而且，你实际上并没有给你输入的.input类现在。