标签：d3-js graph force-layout javascript
我一直在使用D3中内置的强制控制算法进行网络拓扑可视化.一切工作都很好,但是在一个重要的细节上却遇到了麻烦…对于似乎节点数量不同的图,我似乎无法以理想的方式来布局图.理想情况下,我的意思是节点之间的间隔很好(没有重叠),并且节点在任何有意义的地方聚类.我一直在尝试通过调整力布局的“电荷”和“重力”属性来执行此操作,但是无论我尝试什么,它似乎总是可以在一种情况下使用(即,大量节点),但不能对于另一种情况(即少量节点).例如,如果我的布局适用于大图,则当我使用相同的电荷/重力公式查看小图时,病态的几个节点与其余节点相距很远.这是我根据另一个SO问题post使用的公式示例：
var k = Math.sqrt(json.nodes.length / (dim.w * dim.h));
var charge = -10 / k;
var gravity = 100 * k;
这适用于具有14个节点的图形,但是如果我尝试使用5个节点的图形进行相同操作,则其中的某些节点将完全不在屏幕上.请注意,在这两种情况下,用于计算“ k”的宽度/高度不会改变.现在也许我不应该基于图的可见区域的宽度/高度来拥有这些属性.老实说,这不是必需的.我不需要图形来呈现并适合图形的视口.我只需要图形合理地布置自己的位置即可,因此如果其中某些图形可能不在可见区域之内(特别是在大型图形中),那就很好了.我也尝试了以下成功的尝试,但是对于小图,我仍然发现节点的渲染距离图的其余部分太远了：
var charge = -1 * Math.pow(json.nodes.length, 3);
var gravity = 1 / json.nodes.length;
外面有人可以帮助我吗？我们将不胜感激,因为我觉得自己无法胜任这个atm.
解决方法:
在这种基于力的算法情况下,我会说几乎不可能设置全大小写适合的设置.这种布局几乎不依赖于图形密度和内部图形语义.
可能的节点数量范围是多少？密度呢？它是随机生成的,具有预定义密度系数的图,还是后面具有某种语义,并且有可能基于该语义看起来不错.
您说过节点之间的流动距离很远.更高的重力会给您带来什么？
另外,关于linkDistance的建议也可能对您有所帮助.例如.我也使用d3.forceLayout绘制网络图(但它们大多是节点小于50的小型手工图).我只是从Mike Bostock的部队布局示例之一中复制了统计数据.他们在这里：
// graph force layout defaults
var linkDistance = 50,
charge = -200;
// chart properties
var height = 720,
width = 720;
radius = 10;
我不希望它能对您有所帮助,但也许会激发其他人的讨论.
UPD.我只能建议您要尝试.选择一小组测试图,为每个图找到最佳的初始化设置,然后对给定的数字进行插值.同样,如果您处理非常大的图(对于“很好”的可视化来说,这非常大),也许您会发现对其中的某些部分进行分组(打包)很有帮助-它减少了节点的数量(可能减少了图的复杂性).
另外请记住,您不需要设置恒定的力布局设置(电荷,重力,linkDistance等都是保持功能).您可以将节点的半径设置为比可见半径大一点,以使它们不会相互重叠.或为充电设置非恒定功能,例如smth like this.或使用Mike Bostock建议在每个刻度上手动分布节点.
标签：d3-js,graph,force-layout,javascript 来源： https://codeday.me/bug/20191030/1968015.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。