D3 JS -如何绘制水平力图

Question

我试图创建一个力图，如下图所示。我正在检查这个链接力树给出的图表。这棵树是垂直的。我希望它是水平的，这样我就可以实现在图像中显示的图形。我试着玩这段代码，但没能把它变成水平的。有什么方法可以实现在图像中显示的图形。

期望力图

​

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; });

  }