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视觉效果，将每个节点显示为一个rect，在rect内部显示他的输入和输出，然后显示每个节点的输入和输出之间的链接

我正在使用此http://plnkr.co/edit/bXrcbe?p=preview

进行处理

首先我创建一个组：

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

但现在我想链接其他节点输入和数据在组元素上而不在输入元素中的输入......

任何人都有任何方法可以做到这一点吗？

感谢

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课程提供输入。

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

1 个答案: