D3 JS-如何绘制水平力图 [英] D3 JS - How to draw horizontal force graph

问题描述

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

I am trying to create a force graph as shown in below image. I am checking the graph given at this link force tree. This tree is vertical. I want it horizontal so that I can achieve the graph shown in the image. I tried to play with the code but was not able to make it horizontal. Is there any way I can achieve the graph shown in the image.

期望力图

推荐答案

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

Turning the tree horizontal is actually quite simple in the given example.

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

The tick function is responsible for assigning positions to each node, and it modifies the y value of the nodes between levels. Simply change it to modify the x value of the nodes.

像这样:

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

  }

这篇关于D3 JS-如何绘制水平力图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！