節點和子節點在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類現在。