D3 JS-如何绘制水平力图

Question

我正尝试创建一个力图，如下图所示。我正在检查在此链接force tree上给出的图形。这棵树是垂直的。我希望它是水平的，以便可以实现图像中显示的图形。我尝试使用该代码，但无法使其水平。有什么方法可以实现图中显示的图形。

期望力图

Answer 1

在给定的示例中，将树水平旋转实际上非常简单。

tick函数负责为每个节点分配位置，并在级别之间修改节点的y值。只需更改它即可修改节点的x值。

像这样：

function tick(e) {
    var k = 6 * e.alpha;

    // Push sources up and targets down to form a weak tree.
    link
        // Swapped here from y to x
        .each(function(d) { d.source.x -= k, d.target.x += k; })
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

  }