尝试使用d3树形图库将第二个父节点添加到子节点

Question

我尝试创建D3 Tree，并且能够在某种程度上完成任务，但在我的情况下，单个节点可以有多个父节点。

但是，正如我已经了解到的那样，我仍然需要从一个根节点开始构建树，然后我就这样做并且能够构建树，现在想要在树中添加第二个节点节点

＆＃13;

＆＃13;

var data = [{
  "children": [{
    "children": [{
      "children": [{
        "children": [

        ],
        "name": "Hierarchy Child 5",
        "parent": "Hierarchy Sibling",
        "relation": "Parent Of",
        "rid": "a059000000VBecUAAT"
      }],
      "name": "Hierarchy Sibling",
      "parent": "Hierarchy Parent",
      "relation": "Parent Of",
      "rid": "a059000000VBKeYAAX"
    }, {
      "children": [{
        "children": [

        ],
        "name": "Hierarchy Child 1",
        "parent": "ACME",
        "relation": "Parent Of",
        "rid": "a059000000VBKf7AAH"
      }, {
        "children": [

        ],
        "name": "Hierarchy Child 2",
        "parent": "ACME",
        "relation": "Parent Of",
        "rid": "a059000000VBKfCAAX"
      }, {
        "children": [

        ],
        "name": "Hierarchy Child 3",
        "parent": "ACME",
        "relation": "Parent Of",
        "rid": "a059000000VBKfHAAX"
      }, {
        "children": [

        ],
        "name": "Hierarchy Child 4",
        "parent": "ACME",
        "relation": "Parent Of",
        "rid": "a059000000VBKfMAAX"
      }],
      "name": "ACME",
      "parent": "Hierarchy Parent",
      "relation": "Parent Of",
      "rid": "a059000000VBKeJAAX"
    }],
    "name": "Hierarchy Parent",
    "parent": "This is Test Second Parent Node",
    "relation": "Parent Of",
    "rid": "a059000000VBKeOAAX"
  }, {
    "children": [

    ],
    "name": "Hierarchy Uncle",
    "parent": "Hierarchy Grandparent",
    "relation": "Parent Of",
    "rid": "a059000000VBKedAAH"
  }, {
    "children": [

    ],
    "name": "Hierarchy Great Uncle",
    "parent": "Hierarchy Grandparent",
    "relation": "Parent Of",
    "rid": "a059000000VBKenAAH"
  }],
  "name": "Hierarchy Grandparent",
  "parent": "null",
  "relation": "Parent Of",
  "rid": "a059000000VBKeTAAX"
}];

// *********** Convert flat data into a nice tree ***************
// create a name: node map
var dataMap = data.reduce(function(map, node) {
  map[node.name] = node;
  return map;
}, {});

// create the tree array
var treeData = [];
data.forEach(function(node) {
  // add to parent
  var parent = dataMap[node.parent];
  if (parent) {
    // create child array if it doesn't exist
    (parent.children || (parent.children = []))
    // add node to child array
    .push(node);
  } else {
    // parent is null or missing
    treeData.push(node);
  }
});

// ************** Generate the tree diagram	 *****************
var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
  },
  width = 960 - margin.right - margin.left,
  height = 500 - margin.top - margin.bottom;

var i = 0;

var tree = d3.layout.tree()
  .size([height, width]);

var diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.y, d.x];
  });

var svg = d3.select("div#chart-container").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];

update(root);

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
    links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) {
    d.y = d.depth * 180;
  });

  // Declare the nodes…
  var node = svg.selectAll("g.node")
    .data(nodes, function(d) {
      return d.id || (d.id = ++i);
    });

  // Enter the nodes.
  var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    });

  nodeEnter.append("circle")
    .attr("r", 10)
    .style("fill", "#fff");

  nodeEnter.append("text")
    .attr("x", function(d) {
      return d.children || d._children ? -13 : 13;
    })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) {
      return d.children || d._children ? "end" : "start";
    })
    .text(function(d) {
      return d.name;
    })
    .style("fill-opacity", 1);

  // Declare the links…
  var link = svg.selectAll("path.link")
    .data(links, function(d) {
      return d.target.id;
    });

  // Enter the links.
  link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("d", diagonal);

}

＆＃13;

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}
.node text {
  font: 12px sans-serif;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart-container">

</div>

＆＃13;

＆＃13;

＆＃13;

正如我们所看到的，代码运行正常并且树正在生成，但我的JSON数据数组在节点上有第二个父节点，name Hierarchy Parent的{​​{1}}指定为parent 1}}但此节点不会出现在树上。

此图像是我尝试生成的输出：

Answer 1

看一下这个例子

http://bl.ocks.org/robschmuecker/6afc2ecb05b191359862

如果这没有帮助，你可能想看一下力导向图

https://bl.ocks.org/mbostock/4062045

另请查看cytoscape，与d3非常相似，但它处理网络（图形数据结构）以及树http://js.cytoscape.org/demos/aedff159b0df05ccfaa5/