d3.force layout — reference

  • d3.forceSimulation([nodes]):創造一個新的simulation。這個模型包含著一個nodes的數組,如果沒有指定,就會定義一個空的數組在裏頭,之後可以通過 simulation.nodes([nodes]) 再把nodes array 放入 。不同于之前的d3版本,這裏的simulator是自動開啓的。如果你希望能夠手動控制simulation,需要呼叫simulation.stop()來進行終止simulation 的運作,之後可以通過simulation.tick()再次呼叫。等同于給力進行了初始化。

  • simulation.tick():一個持續性刷新的 function 。對現在的圖表進行屬性的設定,繪圖的時候會從這裏得到預期的設定。沒有任何傳遞參數!它不會觸發 events,events 衹會在 simulation.restart() 的時候啓動。The natural number of ticks ⌈ log([alphaMin] / log(1 - [alphaDecay] ⌉; by default, this is 300

可以簡單理解成這就是一個畫圖時候會呼叫使用的 function,這個 function 可以進行一些初始化的設定。修改位置和速度的屬性。

  • simulation.nodes([nodes]):設定 nodes 的資料 , 會自動加上一些出事屬性如下圖。
    其中:
    • vx:x軸方向速度
    • vy:y軸方向速度
    • x:x軸當前坐標
    • y:y軸當前坐標
    • fx - the node’s fixed x-position
    • fy - the node’s fixed y-position
原始node的object.png
simulation過後的object.png

The position ⟨x,y⟩ and velocity ⟨vx,vy⟩ may be subsequently modified by forces and by the simulation 修改位置和速度要在force之後進行速度的初始是0,然後位置的初始是按照 [phyllotaxis arrangement] (http://bl.ocks.org/mbostock/11478058) 排列。

phyllotaxis .png
  • simulation.alpha([alpha]) :目前還不是很瞭解,衹是知道取值範圍在 [0,1] , 有人解釋為熱力值,會是一個逐漸收斂的值,會慢慢降為0。如果取值為 0 的時候就會保持靜止。暫且理解為加速度的參數,部分blog是説冷卻係數。

  • simulation.force(name[, force]):這個是用來設定力的屬性,告知力的名稱以及參數。
    範例如下是

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 給每一個link 。如果有對 links 進行修改,需要重新呼叫這個 method

      • source : 來源
      • target : 目標
      • index : 從 0 開始設定,索引的不同會導致 links 讀取 data 的方式不同。
    • link.id([id]):id 如果有指定回傳的值的話,就是依據指定的内容來找,如果沒有的話,就預設為 index 來檢索。
      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() : 數值從0~1,控制綫的牽引力,
    如果說設定為1的時候,拉動某一個點,其它點也會跟著移動
    如果是設定為0的時候,拉動一個點,其它點會保持不動,綫會拉長。

    • link.distance(): return 一個值來設定長度,初始的預設為 30 .因爲js是物件導向程式,所以在 distance 的位置放置 function 也是沒有問題的。

    • link.iterations([iterations]):控制迭代的次數。

strength:0.png
strength:1.png
  • simulation.find():查找给定位置最近的节点。
    文件解釋:

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點.png
  • simulation.on(typenames, [listener]) :添加和刪除監聽事件。V4 仅支持"tick"和"end"事件。
    這裏説一下end事件,end是指在 alpha < alphaMin 后觸發的内容。
end_event.png
  • Centering:控制力的中心點,衹是對位置的修正,并不會修改到速度

    • d3.forceCenter([x, y]):設定力的中心點到給定的位置。
    • center.x([x]):设置中心的x-坐标。
    • center.y([y]):设置中心的y坐标。
  • Collision:创建一个圆碰撞力,把 node 當成是圓,不再是一個點,計算兩個圓的圓心距離,等於 Collision 設定的圓心。

    • collide.radius([radius]):為 Collision 添加一個半徑
    • collide.strength([strength]):設定 Collision 的力的大小,範圍 [ 0,1 ] ,如果沒有指定的話,初始預設為 0.7。
    • collide.iterations([iterations]):設定迭代的次數,預設值為 1 ,越高的迭代次數意味著越高的電腦性能的消耗 。
沒有設定Collision.png
設定Collision半徑為30.png
  • Many-Body:相互作用力,正值互相吸引,類似于引力,負值相互排斥,類似於電荷閒的互相排斥,defual strength is -30 。

    • d3.forceManyBody() :建立一個相互作用力模型。

    • manyBody.strength([strength]):設定多體力的强度

    • manyBody.theta([theta]) :設定Barnes–Hut approximation標準值,默認為 0.9

    • manyBody.distanceMin([distance]) / manyBody.distanceMax([distance]) :設定最小值和最大值的 distance 。最小值默認為 1 ,避免兩個重叠?? 最大值默認為無窮大。設定一個最大值可以提高性能,并且可以有效的讓佈局更加局部化。

初始-30.png
  • Positioning:坐標軸方向的力。

    • d3.forceX([x]) / d3.forceY([y]):設定 x / y 軸方向的定位,產生那個方向的力。

    • x.strength([strength]) / y.strength([strength]):The strength determines how much to increment the node’s x / y -velocity。這個力決定的是軸綫方向上速度的大小。推薦值是 [ 0 , 1 ]
      初始值是 0.1 。

    • x.x([x]) / y.y([y]):设置目标x / y -坐标。初始為 0 。????

x_position_force.png

參考來源
https://github.com/tianxuzhang/d3.v4-API-Translation

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 自然衝擊療法由丁愚仁老師發明,又稱「禪拍」,「拍打」,"自然拍打"。 丁師及其團隊總結經驗,不同的各種病症(含絕症...
    YouAreMyMusic阅读 2,240评论 0 4
  • 为何叫做 shell ? shell prompt(PS1) 与 Carriage Return(CR) 的关系?...
    Zero___阅读 3,138评论 3 49
  • 淘宝镜像npmnpm install -g cnpm --registry=https://registry.np...
    静听雨逝阅读 312评论 0 0
  • 天生似乎不会寒暄 只是傻傻的笑 这又一定源于 自卑 会羡慕 善于交际的人 又会厌恶那些繁文缛节 小地方的人 ...
    白鸟花阅读 109评论 4 2
  • 清晨,我们从香格里拉镇直奔稻城亚丁景区!买了票景区,那个人山人海,人流堪比国庆节! 昨晚丹姐就说了,这几天亚丁景区...
    重生完美阅读 442评论 0 0