d3.force layout — reference

  • 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
原始node的object.png
simulation過(guò)後的object.png

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) 排列。

phyllotaxis .png
  • 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ù)。

strength:0.png
strength:1.png
  • 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.

x:400,y:0_findout點(diǎn).png
  • simulation.on(typenames, [listener]) :添加和刪除監(jiān)聽(tīng)事件。V4 僅支持"tick"和"end"事件。
    這裏説一下end事件,end是指在 alpha < alphaMin 后觸發(fā)的內(nèi)容。
end_event.png
  • 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ù)意味著越高的電腦性能的消耗 。
沒(méi)有設(shè)定Collision.png
設(shè)定Collision半徑為30.png
  • 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è)最大值可以提高性能,并且可以有效的讓佈局更加局部化。

初始-30.png
  • 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 。????

x_position_force.png

參考來(lái)源
https://github.com/tianxuzhang/d3.v4-API-Translation

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,117評(píng)論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,860評(píng)論 3 423
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 177,128評(píng)論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 63,291評(píng)論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,025評(píng)論 6 410
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 55,421評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,477評(píng)論 3 444
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 42,642評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,177評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,970評(píng)論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,157評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,717評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,410評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 34,821評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 36,053評(píng)論 1 289
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,896評(píng)論 3 395
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,157評(píng)論 2 375

推薦閱讀更多精彩內(nèi)容

  • 自然衝擊療法由丁愚仁老師發(fā)明,又稱「禪拍」,「拍打」,"自然拍打"。 丁師及其團(tuán)隊(duì)總結(jié)經(jīng)驗(yàn),不同的各種病癥(含絕癥...
    YouAreMyMusic閱讀 2,266評(píng)論 0 4
  • 為何叫做 shell ? shell prompt(PS1) 與 Carriage Return(CR) 的關(guān)系?...
    Zero___閱讀 3,179評(píng)論 3 49
  • 淘寶鏡像npmnpm install -g cnpm --registry=https://registry.np...
    靜聽(tīng)雨逝閱讀 318評(píng)論 0 0
  • 天生似乎不會(huì)寒暄 只是傻傻的笑 這又一定源于 自卑 會(huì)羨慕 善于交際的人 又會(huì)厭惡那些繁文縟節(jié) 小地方的人 ...
    白鳥花閱讀 131評(píng)論 4 2
  • 清晨,我們從香格里拉鎮(zhèn)直奔稻城亞丁景區(qū)!買了票景區(qū),那個(gè)人山人海,人流堪比國(guó)慶節(jié)! 昨晚丹姐就說(shuō)了,這幾天亞丁景區(qū)...
    重生完美閱讀 462評(píng)論 0 0