動態更改力布局d3的位置

Question

如何更改力布局d3的布局形狀？ 在這里，我得到json數據中的x和y位置。 考慮一下當我單擊一個按鈕時，布局必須動態更改為圓形，如圖中所示。

Answer 1

剛剛看到您希望它是圓形的，因此，您必須遍歷每個節點並設置位置。 因此，例如：

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

這會將每個節點放在同一行上，每個節點之間的間隔為50px。 現在，對於一個圓圈，您可能必須使用(Pi*r)^2並進行處理。

因此，仔細檢查每個位置，然后根據“ i”（即節點數組中的空間）設置位置，即可完成操作：)

從您發布的示例中，您只需要將此功能應用於代碼：

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文件）