d3力场Force Layout_d3-force-layout-优快云博客

本文链接：https://blog.youkuaiyun.com/artemisrj/article/details/44262547

本文主要介绍了d3.js中的力场布局Force Layout，包括力场相关的几个核心函数，如力场的设置、节点和链接的管理、布局尺寸、连接距离、连接强度等参数的调整。通过力导向图，可以实现复杂网络数据的可视化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://github.com/mbostock/d3/wiki/Force-Layout 介绍API界面

力场相关的几个函数

力学(Force)

d3.layout.force -节点（node）基于物理模拟的位置连接。
force.on - 监听布局位置的变化。(仅支持"start","step","end"三种事件)
force.nodes - 获得或设置布局中的节点（node）阵列组。
force.links - 获得或设置布局中节点间的连接（Link）阵列组。.
force.size - 获取或设置布局的宽和高的大小.
force.linkDistance - 获取或设置节点间的连接线距离.
force.linkStrength - 获取或设置节点间的连接强度.
force.friction - 获取或设置摩擦系数.
force.charge - 获取或设置节点的电荷数.(电荷数决定结点是互相排斥还是吸引)
force.gravity - 获取或设置节点的引力强度.
force.theta - 获取或设置电荷间互相作用的强度.
force.start - 开启或恢复结点间的位置影响.
force.resume - 设置冷却系数为0.1,并重新调用start()函数.
force.stop - 立刻终止结点间的位置影响.(等同于将冷却系数设置为0)
force.alpha - 获取或设置布局的冷却系数.(冷却系数为0时,节点间不再互相影响)
force.tick - 让布局运行到下一步.
force.drag - 获取当前布局的拖拽对象实例以便进一步绑定处理函数.

以http://bl.ocks.org/mbostock/950642 为例子来说明force layout的使用方法。

var force = d3.layout.force() //初始化
    .gravity(.05) //重力
    .distance(100)	//距离
    .charge(-100) 	
    .size([width, height]);

force
      .nodes(json.nodes)
      .links(json.links)
      .start();

加入数据，nodes是

[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1}]

这样的数组。

link是

[{"source":76,"target":62,"value":1},{"source":76,"target":48,"value":1},{"source":76,"target":58,"value":1}]

这样的数组。

 var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);//绑定数据

每次迭代的时候发生的动作。

 force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

因为某些原因再试了一下，其他人的force-directed，，，

springy https://github.com/dhotson/springy 用的canvas ，线条可以有方向。

http://marvl.infotech.monash.edu/webcola/ cola.js和d3比较像，不过做了覆盖的判断，规模更小