d3.js 将 Force 布局从 v3 升级到 v4答案

【问题标题】：d3.js Upgrading Force layout from v3 to v4d3.js 将 Force 布局从 v3 升级到 v4
【发布时间】：2020-10-26 15:05:15
【问题描述】：

我正在将使用 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(chargeDistance))？

另外，我的转换验证也将不胜感激。

【问题讨论】：

标签： javascript d3.js layout

【解决方案1】：

在 d3 v3 中，documentation on chargeDistance：“如果指定了距离，设置施加充电力的最大距离。如果未指定距离，则返回当前最大充电距离，默认为无穷大。"

对我来说，这强烈暗示 d3.forceManyBody().distanceMax() 是正确答案。

【讨论】：