动态更改力布局d3的位置

Question

如何更改力布局d3的布局形状？这里我得到了json数据中的x和y位置。考虑当我单击按钮时，布局必须像图像一样动态变为圆形。

Answer 1

刚看到你想要它循环，所以，你必须遍历每个节点并设置位置。例如：

Nodes.each(function(d, i){          
            d.x = i * 50;
            d.y = 100;
        }); 

这将使每个节点在每个节点之间以50px放在同一行上。现在，你可能不得不使用(Pi*r)^2并使用它。

因此，请仔细检查每个人，根据“我＆＃39; （即它在节点阵列中的空间）并且你已经完成了:)

从您发布的示例中，您只需将此功能应用于您的代码：

function radial(data, index, alpha) {
    var startAngle = 30;
    var radius = 350;
    var currentAngle = startAngle + (30 * index);
    var currentAngleRadians = currentAngle * D2R;

    var radialPoint = {
      x: 500 + radius * Math.cos(currentAngleRadians),
      y: 250 + radius * Math.sin(currentAngleRadians)
    };

    var affectSize = alpha * 0.1;

    data.x += (radialPoint.x - data.x) * affectSize;
    data.y += (radialPoint.y - data.y) * affectSize;


}

当你调用它时，你将节点数据（JSON文件传递给它）