d3.v4.js数据可视化力导向图 force 产业链

矫情吗；* 2021-11-22 10:08 542阅读 0赞

PC和APP（手机网页版均可）静态图（我录好的视频不能上传）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70 3]  
d3.v4 中文API文档地址https://github.com/xswei/d3js\_doc/blob/master/API\_Reference/API.md  
d3.js 力导向图中默认提供了 5 种作用力：

> **中心力（Centering）**  
> 中心力作用于所有的节点而不是某些单独节点，可以将所有的节点的中心一致的向指定的位置移动，而且这种移动不会修改速度也不会影响节点间的相对位置。  
> **碰撞力（Collision）**  
> 碰撞力将每个节点视为一个具有一定半径的圆，这个力会阻止代表节点的这个圆相互重叠，即两个节点间会相互碰撞，可以通过设置 strength 设置这个碰撞力的强度。  
> **弹簧力（Links）**  
> 当两个节点通过设置 link 连接到一起后，可以设置弹簧力，这个力将根据两个节点间的距离将两个节点拉近或推远，力的强度和这个距离成比例就和弹簧一样。  
> **电荷力（Many-Body）**  
> 通过设置 strength 来模拟所有节点间的相互作用力，如果为正节点间就会相互吸引，可以用来模拟电荷吸引力，如果为负节点间就会相互排斥。这个力的大小也和节点间的距离有关。  
> **定位力（Positioning）**  
> 这个力可以将节点沿着指定的维度推向一个指定位置，比如通过设置 forceX 和 forceY 就可以在 X轴 和 Y轴 方向推或者拉所有的节点，forceRadial 则可以形成一个圆环把所有的节点都往这个圆环上相应的位置推。

部分代码

设置fx和fy可以固定位置

手机网页版兼容很麻烦  
监听横竖屏事件

window.addEventListener(evt, function() {
                                if (vm.isiOS && (Math.abs(window.orientation) === 90)) {
                                    // 横屏
                                    setTimeout(function () {
                                        vm.widths = $(document).width()
                                        vm.heights = $(document).height()
                                     }, 250)
                                } else if (vm.isiOS && (Math.abs(window.orientation) === 0)) {
                                    // 竖屏
                                    setTimeout(function () {
                                        vm.widths = $(document).width()
                                        vm.heights = $(document).height()
                                    }, 250)
                                }
                            })

横竖屏切换时，获取的width和height还是切换前的宽高，所以加了一个定时器

时间有限我先粗略的写吧，扣扣交流1979751899

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20211122/1e4db0c2fcf04dcc97a7ea1a4b543071.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70 1]: /images/20211122/437271ab357547fdb6b3bd3b8dabb52b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70 2]: /images/20211122/cb3b1ba90c1841aea791e4a82c06467f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70 3]: /images/20211122/80973d9e2d78418a929337572a41c9cf.png