Javascript n>；d3.js树布局中的1个父级

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>

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

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

---

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

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

Dagre是一个使用d3绘制非循环图的库。你可以尝试修改这个。 是githubwiki

家谱

---

你可以找到一个很好的方法来创建一个家谱，一个孩子可以有多个父母。如果结构不重要，这可能满足您的要求。

节点有多个父节点的图形不再是树。我认为树的布局在这里不是正确的选择；也许是部队的布局？谢谢你指出这些。正如我在编辑中所解释的，我已经设法解决了我的问题。

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