Javascript 使用angularjs的图形布局

我目前正在使用AngularJS开发一个GUI，其中包含一个在javascript对象中包含节点和连接的图形，如下所示：

Nodes = [{'name': 'name1', x: 0, y: 0, id: 1}, {'name': 'name2', x: 0, y: 0, id: 2}, {'name': 'name3', x: 0, y: 0, id: 3}];
Connections = [{'from': 1, 'to': 2}, {'from': 1, 'to': 3}];

我需要做的是为每个节点提供x和y值。目前，我正在使用一个简单的偏移来避免重叠并逐节点渲染，但我希望计算每个节点的x和y值，以获得适当的布局

是否有一个算法，我给我的节点和连接，并返回一个布局（每个节点的x，y值），这比我的简单解决方案更好看

我已经尝试过D3，但我已经在使用第三方库来绘制图形，而且很难对其进行集成，因此最佳解决方案是简单地给出当前库的数据结构（节点和连接）的坐标。

从中可以找到这样的算法。如果省略图形代码，则最终会出现以下情况：

var width = 100;
var height = 100;
var Nodes = [{'name': 'name1', x: 0, y: 0, id: 1}, {'name': 'name2', x: 0, y: 0, id: 2}, {'name': 'name3', x: 0, y: 0, id: 3}];
var Connections = [{'source': 1, 'target': 2}, {'source': 1, 'target': 3}];

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

simulation
    .nodes(Nodes);

simulation.force("link")
    .links(Connections);

console.log(Nodes, Connections);

如果现在打开控制台并检查Nodes变量，您将看到x和y位置已更新