D3.js 可以为力导向布局指定自定义力函数吗?

D3.js 可以为力导向布局指定自定义力函数吗?,d3.js,graph-layout,D3.js,Graph Layout,我想用另一个力函数族来试验力定向图布局 对于每个节点n_i,我可以定义一个“力函数”f_i,以便 f_i(n_i)等于零;及 f_i(n_j),其中n_i!=n_j,是由于某个其他节点而对节点施加的力n_i 节点n_i上的净力应为力f_i(n_j)的矢量和,其中n_j范围覆盖所有其他节点1 是否有办法告诉d3.js在布局算法中使用这些自定义强制函数? [for d3.js的force-directed布局描述了调整其内置力函数的各种方式,但我一直无法找到一种完全不同的力函数的指定方式,即无法

我想用另一个力函数族来试验力定向图布局

对于每个节点
n_i
,我可以定义一个“力函数”
f_i
,以便

  • f_i(n_i)
    等于零;及
  • f_i(n_j)
    ,其中
    n_i!=n_j
    ,是由于某个其他节点而对节点施加的力
    n_i
节点
n_i
上的净力应为力
f_i(n_j)
的矢量和,其中
n_j
范围覆盖所有其他节点1

是否有办法告诉d3.js在布局算法中使用这些自定义强制函数?

[for d3.js的force-directed布局描述了调整其内置力函数的各种方式,但我一直无法找到一种完全不同的力函数的指定方式,即无法通过调整内置力函数的参数来实现的力函数。]



1下面,除了根据节点的力函数计算的力外,不应在节点上施加任何其他/额外的力。要实现这一点,您需要创建自己的自定义布局。据我所知,没有关于这方面的教程,但现有force布局的源代码应该是一个很好的起点,因为据我所知,自定义布局的结构与此非常相似。

是的,您可以。功劳归于他和他的家人

let margin={
前100名,
右:100,,
底数:100,
左:100
};
设宽度=960,
高度=500,
padding=1.5,//相同颜色圆之间的间隔
clusterPadding=6,//不同颜色圆之间的间隔
最大半径=12;
设n=200,//节点总数
m=10,//不同簇的数目
z=d3.scaleOrdinal(d3.SchemeCategory 20),
集群=新阵列(m);
让svg=d3.select('body')
.append('svg')
.attr('height',height)
.attr('width',width)
.append('g').attr('transform','translate('+width/2+','+height/2+'));
让节点=d3.range(200).map(()=>{
设i=Math.floor(Math.random()*m),
radius=Math.sqrt((i+1)/m*-Math.log(Math.random())*maxRadius,
d={
集群:我,
r:半径
};
如果(!clusters[i]|(radius>clusters[i].r))clusters[i]=d;
返回d;
});
let circles=svg.append('g')
.基准面(节点)
.selectAll(“.circle”)
.数据(d=>d)
.enter().append('圆')
.attr('r',(d)=>d.r)
.attr('fill',(d)=>z(d.cluster))
.attr('笔划','黑色')
.attr(“笔划宽度”,1);
让模拟=d3。力模拟(节点)
.velocityDecay(0.2)
.力(“x”,d3.forceX().强度(.0005))
.力(“y”,d3.力().强度(.0005))
.force(“碰撞”,碰撞)//d.y)
.addAll(节点);
nodes.forEach(函数(d){
var r=d.r+maxRadius+Math.max(填充,簇填充),
nx1=d.x-r,
nx2=d.x+r,
ny1=d.y-r,
ny2=d.y+r;
四叉树访问(函数(四叉树,x1,y1,x2,y2){
如果(quad.data&&(quad.data!==d)){
var x=d.x-quad.data.x,
y=d.y-四元数据.y,
l=数学sqrt(x*x+y*y),
r=d.r+quad.data.r+(d.cluster==quad.data.cluster?填充:clusterPadding);
if(lnx2 | x2ny2 | y2


您需要创建一个新的布局来使用您的自定义力。@Larskothoff:谢谢您的指针。我刚刚扫描了d3.js文档,但找不到任何关于创建自定义布局的文档。我想这涉及到类似于
d3.layout.myLayout=function(){…}
,但我一点也不清楚这个函数应该返回什么。瞧,我找不到任何关于“布局界面”的文档。当然,我可以尝试对d3.js源代码进行反向工程,但我之前的尝试非常痛苦,所以如果可能的话,我真的不想这么做。恐怕没有相关文档,您必须查看源代码。从force布局开始应该非常简单,尽管听起来,自定义布局的结构与之非常相似。@LarsKotthoff:再次感谢;我会接受你的评论作为答案,如果你把它们作为这样张贴。