Javascript D3图形布局-具有多个父级的树结构

让我首先声明我对D3和Javascript是完全陌生的。通过一点实验，我试图开发一个类似树的结构，这个节点可以有多个父节点

输入：

包含节点和链接信息的Json

 var graph = {
    "nodes": [  { "id" : 0},
                { "id" : 1},
                { "id" : 2},
                { "id" : 3},
                { "id" : 4},
                { "id" : 5}
            ],
    "links": [  { "target": 5, "source":  1 },
                { "target":  2, "source":  0 },
                { "target": 3, "source":  4 },
                { "target": 1, "source":  2},
                { "target":  1, "source":  0 },
                
            ]
    };

注意：这只是作为我如何获得数据的参考，它可能有数千个节点

输出：

我希望输出像树结构一样，有点像，比如说节点必须以深度/层次结构绘制，根位于顶部，相同层次的节点以这样的方式排列，以最小化链接重叠

编辑：上述输入的输出假定零为根

我面临的问题：

因为我只得到节点及其源和目标，而不是它们的坐标，所以我必须解析整个列表，计算级别，然后根据该级别划分高度，然后绘制节点。处理这类问题最有效的方法是什么？我应该深入研究算法解决方案吗

或

D3中是否有一些图形绘制功能，它将这个JSON作为输入，并完成其余的工作

请注意，这些节点可以有多个父节点，而我在这里的主要关注点是以适当的/层次顺序绘制这些节点，因此我面临的主要问题是计算所有节点的X/Y坐标，只给出上述输入

---

请帮助我更好地理解这个话题，谢谢。

整天都在断断续续地思考这个问题。使用内置的

d3

结构，我认为它与您将要得到的最接近。我已将您的数据转换为版本4示例：

.连接线{
冲程：#aaa；
笔画宽度：5px；
}
.节点圆{
指针事件：全部；
中风：无；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{
返回d.id；
}))
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））
.force（“y”，d3.forceY（））
变量图={
“节点”：[{
“id”：0
}, {
“id”：1
}, {
“id”：2
}, {
“id”：3
}, {
“id”：4
}, {
“id”：5
}],
“链接”：[{
“目标”：5，
“来源”：1
}, {
"目标":二,，
“来源”：0
}, {
"目标":三,，
“来源”：4
}, {
"目标":一,，
“来源”：2
}, {
"目标":一,，
“来源”：0
},
]
};
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）；
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.数据（图.节点）
.enter（）.append（“圆”）
.attr（“r”，10）；
node.append（“标题”）
.文本（功能（d）{
返回d.id；
});
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
函数勾选（）{
var k=6*simulation.alpha（）；
//向上推源，向下推目标，形成弱树。
链接
.每个功能（d）{
d、 source.y-=k，d.target.y+=k；
})
.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
节点
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
});
}

我无法计算出您的预期输出。假设零是根节点，那么它将是。3到4会消失，因为它破坏了父/子关系。。。这是您期望的输出吗？@标记实际上输入只是作为我的输入的参考…它可能包含数千个节点，例外的输出是无论哪个节点是根节点都应该出现在顶部，然后是其子节点，以此类推，链接重叠最小。希望我能解释我自己；）但是我的图表是给定示例数据的预期输出吗？@标记不完全，级别1应该包含0作为根，那么它的较低级别2应该有2和1，就像您一样，但最后一个级别3应该只有5与1连接，第三级不应该再有一个1级了…谢谢你指出，我会根据给定的输入用正确的输出更新问题。我建议画一张图片。看了你的最后一句话，我更糊涂了，原来我是：）酷！它似乎适用于少量节点，让我尝试一下更大数量的节点，将发回结果。我按照您的链接到强制定向树，这更符合我所寻找的答案，但问题是，大量节点会变成一个集群……有没有办法为每个节点提供深度属性，如一级？@Mohit，你有没有编好的例子？我试图用随机数据重新创建，但没有正确的父/子结构，这是一个混乱。在上面的代码中，

var k=6*simulation.alpha（）

，

6

是每个节点的强制距离。假设我使用此数据绘制图形…主要问题是根的深度，因此子节点的深度随刷新而变化。现在，如果我想让根始终位于顶部，并且它的深度是垂直的，那么？我能让自己明白吗？；）