將重力應用於有界的d3.js力佈局

我有一個很好的d3.js圖。有許多過濾器，並且有時將一些圖分解應用到許多子圖中，同時它會打破許多子圖超出範圍。將重力應用於有界的d3.js力佈局

因此，我試圖使用重力。

下面是我如何綁定我的子圖：

var width = 1160, 
     height = 700, 
     radius = 6; 
    var svg = d3.select(selector).append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { 
     return d.id; 
    }).distance(40).strength(1)) 
    .force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(width/2, height/2)) 
    .force(d3.gravity(0.25));

但這種失敗：

Uncaught ReferenceError: d3.gravity is not a function

所以，我感到困惑究竟如何應用重力。 d3.js新手

下面是fiddle

來源

2016-12-30 optimus_prime

最後一行應.force（d3.gravity（0.25））;擺脫那個特定的錯誤。 – John

確實嘗試過。但仍然是相同的錯誤 –

嗯，這個錯誤消息幾乎指出它：沒有'd3.gravity（）'這樣的函數。爲了在D3 v4中模擬重力，你可以爲你的目的定製['d3.forceManyBody（）']（https://github.com/d3/d3-force#forceManyBody），或者提供一個定製的強制功能，比如'重力（）'函數在羅伯特蒙費拉的[Block]中（https://bl.ocks.org/monfera/2d2809d8458ffb81cc9acab2e65ed4ef）。 – altocumulus

此自定義功能重力沒有的伎倆：

 var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d) { 
     return d.id; 
    }).distance(40).strength(1)) 
    .force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(width/2, height/2)) 
    .force("gravity",gravity(0.25)); 


function gravity(alpha) { 
    return function(d) { 
    d.y += (d.cy - d.y) * alpha; 
    d.x += (d.cx - d.x) * alpha; 
    }; 
}

來源

2017-01-03 16:43:54

將重力應用於有界的d3.js力佈局

回答

相關問題