d3.forceSimulation([nodes]):創(chuàng)造一個(gè)新的simulation。這個(gè)模型包含著一個(gè)nodes的數(shù)組,如果沒(méi)有指定,就會(huì)定義一個(gè)空的數(shù)組在裏頭,之後可以通過(guò) simulation.nodes([nodes]) 再把nodes array 放入 。不同于之前的d3版本,這裏的simulator是自動(dòng)開(kāi)啓的。如果你希望能夠手動(dòng)控制simulation,需要呼叫simulation.stop()來(lái)進(jìn)行終止simulation 的運(yùn)作,之後可以通過(guò)simulation.tick()再次呼叫。等同于給力進(jìn)行了初始化。
simulation.tick():一個(gè)持續(xù)性刷新的 function 。對(duì)現(xiàn)在的圖表進(jìn)行屬性的設(shè)定,繪圖的時(shí)候會(huì)從這裏得到預(yù)期的設(shè)定。沒(méi)有任何傳遞參數(shù)!它不會(huì)觸發(fā) events,events 衹會(huì)在 simulation.restart() 的時(shí)候啓動(dòng)。The natural number of ticks ? log([alphaMin] / log(1 - [alphaDecay] ?; by default, this is 300
可以簡(jiǎn)單理解成這就是一個(gè)畫圖時(shí)候會(huì)呼叫使用的 function,這個(gè) function 可以進(jìn)行一些初始化的設(shè)定。修改位置和速度的屬性。
- simulation.nodes([nodes]):設(shè)定 nodes 的資料 , 會(huì)自動(dòng)加上一些出事屬性如下圖。
其中:- vx:x軸方向速度
- vy:y軸方向速度
- x:x軸當(dāng)前坐標(biāo)
- y:y軸當(dāng)前坐標(biāo)
- fx - the node’s fixed x-position
- fy - the node’s fixed y-position
The position ?x,y? and velocity ?vx,vy? may be subsequently modified by forces and by the simulation 修改位置和速度要在force之後進(jìn)行速度的初始是0,然後位置的初始是按照 [phyllotaxis arrangement] (http://bl.ocks.org/mbostock/11478058) 排列。
simulation.alpha([alpha]) :目前還不是很瞭解,衹是知道取值範(fàn)圍在 [0,1] , 有人解釋為熱力值,會(huì)是一個(gè)逐漸收斂的值,會(huì)慢慢降為0。如果取值為 0 的時(shí)候就會(huì)保持靜止。暫且理解為加速度的參數(shù),部分blog是説冷卻係數(shù)。
simulation.force(name[, force]):這個(gè)是用來(lái)設(shè)定力的屬性,告知力的名稱以及參數(shù)。
範(fàn)例如下是
var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody())
.force("link", d3.forceLink(links))
.force("center", d3.forceCenter());
-
link:d3.forceLink([links]) :
-
link.links([links]):為給定的 links array 添加力的作用。回傳 distance 和 strength 給每一個(gè)link 。如果有對(duì) links 進(jìn)行修改,需要重新呼叫這個(gè) method
- source : 來(lái)源
- target : 目標(biāo)
- index : 從 0 開(kāi)始設(shè)定,索引的不同會(huì)導(dǎo)致 links 讀取 data 的方式不同。
link.id([id]):id 如果有指定回傳的值的話,就是依據(jù)指定的內(nèi)容來(lái)找,如果沒(méi)有的話,就預(yù)設(shè)為 index 來(lái)檢索。
ex:
-
function id(d) {
return d.index;
}
var nodes = [
{"id": "Alice"},
{"id": "Bob"},
{"id": "Carol"}
];
var links = [
{"source": 0, "target": 1}, // Alice → Bob
{"source": 1, "target": 2} // Bob → Carol
];
function id(d) {
return d.id;
}
var nodes = [
{"id": "Alice"},
{"id": "Bob"},
{"id": "Carol"}
];
var links = [
{"source": "Alice", "target": "Bob"},
{"source": "Bob", "target": "Carol"}
];
-
linkStrength() : 數(shù)值從0~1,控制綫的牽引力,
如果說(shuō)設(shè)定為1的時(shí)候,拉動(dòng)某一個(gè)點(diǎn),其它點(diǎn)也會(huì)跟著移動(dòng)
如果是設(shè)定為0的時(shí)候,拉動(dòng)一個(gè)點(diǎn),其它點(diǎn)會(huì)保持不動(dòng),綫會(huì)拉長(zhǎng)。link.distance(): return 一個(gè)值來(lái)設(shè)定長(zhǎng)度,初始的預(yù)設(shè)為 30 .因爲(wèi)js是物件導(dǎo)向程式,所以在 distance 的位置放置 function 也是沒(méi)有問(wèn)題的。
link.iterations([iterations]):控制迭代的次數(shù)。
- simulation.find():查找給定位置最近的節(jié)點(diǎn)。
文件解釋:
Returns the node closest to the position ?x,y? with the given search radius. If radius is not specified, it defaults to infinity. If there is no node within the search area, returns undefined.
- simulation.on(typenames, [listener]) :添加和刪除監(jiān)聽(tīng)事件。V4 僅支持"tick"和"end"事件。
這裏説一下end事件,end是指在 alpha < alphaMin 后觸發(fā)的內(nèi)容。
-
Centering:控制力的中心點(diǎn),衹是對(duì)位置的修正,并不會(huì)修改到速度
- d3.forceCenter([x, y]):設(shè)定力的中心點(diǎn)到給定的位置。
- center.x([x]):設(shè)置中心的x-坐標(biāo)。
- center.y([y]):設(shè)置中心的y坐標(biāo)。
-
Collision:創(chuàng)建一個(gè)圓碰撞力,把 node 當(dāng)成是圓,不再是一個(gè)點(diǎn),計(jì)算兩個(gè)圓的圓心距離,等於 Collision 設(shè)定的圓心。
- collide.radius([radius]):為 Collision 添加一個(gè)半徑
- collide.strength([strength]):設(shè)定 Collision 的力的大小,範(fàn)圍 [ 0,1 ] ,如果沒(méi)有指定的話,初始預(yù)設(shè)為 0.7。
- collide.iterations([iterations]):設(shè)定迭代的次數(shù),預(yù)設(shè)值為 1 ,越高的迭代次數(shù)意味著越高的電腦性能的消耗 。
-
Many-Body:相互作用力,正值互相吸引,類似于引力,負(fù)值相互排斥,類似於電荷閒的互相排斥,defual strength is -30 。
d3.forceManyBody() :建立一個(gè)相互作用力模型。
manyBody.strength([strength]):設(shè)定多體力的強(qiáng)度
manyBody.theta([theta]) :設(shè)定Barnes–Hut approximation標(biāo)準(zhǔn)值,默認(rèn)為 0.9
manyBody.distanceMin([distance]) / manyBody.distanceMax([distance]) :設(shè)定最小值和最大值的 distance 。最小值默認(rèn)為 1 ,避免兩個(gè)重疊?? 最大值默認(rèn)為無(wú)窮大。設(shè)定一個(gè)最大值可以提高性能,并且可以有效的讓佈局更加局部化。
-
Positioning:坐標(biāo)軸方向的力。
d3.forceX([x]) / d3.forceY([y]):設(shè)定 x / y 軸方向的定位,產(chǎn)生那個(gè)方向的力。
x.strength([strength]) / y.strength([strength]):The strength determines how much to increment the node’s x / y -velocity。這個(gè)力決定的是軸綫方向上速度的大小。推薦值是 [ 0 , 1 ]
初始值是 0.1 。x.x([x]) / y.y([y]):設(shè)置目標(biāo)x / y -坐標(biāo)。初始為 0 。????
參考來(lái)源
https://github.com/tianxuzhang/d3.v4-API-Translation