D3.js中的节点和子节点链接

Question

I have this data format:

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

i want to crate a d3 visualitation showing each node as a rect an inside of rect show his inputs and output and then show links betweens inputs and outputs of each node

im working on it in this plunk http://plnkr.co/edit/bXrcbe?p=preview

first i create a group:

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

and then append its inputs:

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

but now i want to link the inputs wht other node input and the data is on the group element and not in the input element...

anyone has any aproach to do this?

thanks

Answer 1

You probably don't want to do another operation on the data. For creating links, it would probably be better to create another attribute on each node describing the links in that node. You could either pre-define them (useful if not all inputs in a node connect to all outputs), or you could loop through your object and populate a link between each input and each output, like so: (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);
    }
  }
};

With links defined on each node, you can add them the same way as you added your nodes:

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

Also, you aren't actually giving your inputs the .input class right now.