树布局中父母n>1d3.js孩子

Question

d3.js树形布局是一个很棒的工具，但是它默认只允许孩子有一个单亲。我希望能够让孩子们有不止一个父母。我对树的默认行为提供的节点位置很满意。我想要的只是在默认树被计算出来之后，在没有孩子的父母和现有的孩子之间画出额外的对角线链接。我的脚本目前看起来像这样:

<script>

var h = 870,
    w = 1200;
var dimcirc = [60,30,10,8];
var offsetL = 60;
var couleurs = [
        "#a2a2ff",
        "#87ff87",
        "#ffc55c",
        "#ff844d",
        "#ffe452"];

var tree = d3.layout.tree()
    .size([h-100, w-400])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 1.2); });

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

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)
  .append("g");

d3.json("donnees.json", function(error, root) {
  if (error) throw error;

  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

  var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", function(d){return "niv_" + d.depth.toString();})
    .classed("node", true)
    .attr("transform", function(d) { return "translate(" + (d.y + offsetL).toString() +  "," + d.x +")"; })

  // Draw node circles
  node.append("circle")
        .attr("fill", function(d){
                console.log(d.couleur);
                if(d.couleur!=null){
                    return couleurs[d.couleur];
                }
                else {return couleurs[4];}
        })
      .attr("r", function(d){
        return dimcirc[d.depth];   
  });

  node.append("text")
      .attr("dy", "0.31em")
      //.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d){
            return "translate(" + (dimcirc[d.depth] + 10).toString() + ")"
            })
      .text(function(d) { return d.name; })
        .call(wrap, 230);

});

// Wrap text
function wrap(text, width) {
   // A function to help wrap svg text.
}

</script>

我试图使用根对象将父节点的子节点复制到无子节点，但无济于事（根对象的结构对我来说非常晦涩难懂）。

感谢任何帮助。

PS ：我知道一个类似的问题（d3.js具有相同父级的树节点），但是缺乏答案对我没有多大帮助或当然。

编辑

我已经设法得到我想要的：

1)识别感兴趣的节点:那些没有要连接到现有子节点的子节点，以及后者的父节点。

2） 从根对象中提取源（没有子节点的节点）和目标（要连接到此节点的子节点）的坐标。

3）使用与树创建的“标准”路径相同的对角线创建额外的路径。

下面是我添加的代码，用于获取每个路径的源和目标:

var link2 = [];
var loopLink2 = [{"a":0,"b":1, "c":0,"d":0},{"a":1,"b":1, "c":1,"d":0},{"a":3,"b":0, "c":2,"d":1}];

loopLink2.forEach(function(d){

    var sourX = root.children[d.a].children[d.b].x;
    var sourY = root.children[d.a].children[d.b].y;

    root.children[d.c].children[d.d].children.forEach(function(d){
        link2.push({"source":{"x":sourX,"y":sourY}, "target":{"x":d.x,"y":d.y}});
        console.log(link2);
    });
});

这里是实际创建路径的地方:

svg.selectAll(".link2")
    .data(link2)
    .enter().append("path")
    .attr("class", "link2")
    .attr("d", diagonal)
    .attr("transform", function(d) { return "translate(0," + offsetT +")"; });

有人有更好的解决方案吗？

Answer 1

我不知道这是否正是你要找的。但这可能会有帮助。

达格

Dagre是一个使用d3绘制非循环图的库。您可以尝试修改它。这是github wiki。

家系

在这里，您可以找到创建家谱的出色答案 ，该家谱可以为一个孩子提供多个父母。如果结构无关紧要，这可能会满足您的要求。