d3.js 升級力布局從 v3 到 v4

Question

我正在將使用 d3 v3 的力布局構建的 d3 可視化升級到 d3 v4+。 這是我試圖找到 v4 等效項的代碼塊。

 var nodes = { "Node1":{"name":"Node1","type":"source","nodeType":-1,"size":1,"tooltip":[]}, "Node2":{"name":"Node2","type":"target","nodeType":-1,"size":1,"tooltip":[]}, "Node3":{"name":"Node3","type":"target","nodeType":-1,"size":1,"tooltip":[]}}; var links = [ {"source":{"name":"Node1","type":"source","nodeType":-1,"size":1,"tooltip":[]}, "target":{"name":"Node2","type":"target","nodeType":-1,"size":1,"tooltip":[]}, "sourcetype":-1,"targettype":-1,"relationship":"OWNS","relGroup":"relGroup0","relIndex":1,"toolTip":[], "thickness":10,"size":1,"multiLinkCount":1,"multiLinkIndex":0,"relCount":1}, {"source":{"name":"Node1","type":"source","nodeType":-1,"size":1,"tooltip":[]}, "target":{"name":"Node3","type":"target","nodeType":-1,"size":1,"tooltip":[]}, "sourcetype":-1,"targettype":-1,"relationship":"OWNS","relGroup":"relGroup0","relIndex":1,"toolTip":[], "thickness":1,"size":1,"multiLinkCount":2,"multiLinkIndex":0,"relCount":1}, {"source":{"name":"Node3","type":"target","nodeType":-1,"size":1,"tooltip":[]}, "target":{"name":"Node1","type":"source","nodeType":-1,"size":1,"tooltip":[]}, "sourcetype":-1,"targettype":-1,"relationship":"OWNS","relGroup":"relGroup0","relIndex":1,"toolTip":[], "thickness":3,"size":1,"multiLinkCount":2,"multiLinkIndex":1,"relCount":1}]; var linkGravity = 0.1; var linkFriction = 0.9; var linkDistance = 100; var linkCharge = -400; var chargeDistance = 1000; var linkStrength = 0.5; var width = 400; var height = 400; var force = d3.layout.force().nodes(d3.values(nodes)).links(links).linkStrength(linkStrength).linkDistance(linkDistance).gravity(linkGravity).friction(linkFriction).chargeDistance(chargeDistance).charge(linkCharge).size([(width), (height)]).start();

以下是我通過關於 SO 的類似問題和閱讀文檔能夠得出的結論：

 //d3.layout.force() //.nodes(d3.values(nodes)) d3.forceSimulation(d3.values(nodes)) //.links(links) //.linkStrength(linkStrength) //.linkDistance(linkDistance).force('link',d3.forceLink().links(links).distance(linkDistance).strength(linkStrength)) //.gravity(linkGravity) //declared before d3.forceSimulation //var forceX = d3.forceX(width / 2).strength(linkGravity) //var forceY = d3.forceY(height / 2).strength(linkGravity).force('x', forceX).force('y', forceY) //.friction(linkFriction).velocityDecay(linkFriction) //.charge(linkCharge) - not sure about this one.force('charge',d3.forceManyBody().strength(linkCharge)) //.size([(width), (height)]).force("center", d3.forceCenter(width/2,height/2)) //.start() - removed as not needed anymore

我想我得到了大部分，但我不確定.chartDistance - 它與v4的 d3.forceManyBody().distanceMax() 有關還是與.force('collide', d3.forceCollide().radius 有關（充電距離））？

此外，我的轉換驗證也將不勝感激。

Answer 1

在 d3 v3 中，有關 chargeDistance 的文檔：“如果指定了距離，則設置施加電荷力的最大距離。如果未指定距離，則返回當前最大電荷距離，默認為無窮大。”

對我來說，這強烈暗示 d3.forceManyBody().distanceMax() 是正確的答案。