力导向算法简单实现

转自 http://zhenghaoju700.blog.163.com/blog/static/13585951820114153548541/

 

力导向算法 核心

1. 随机分布初始节点位置;
2. 计算每次迭代局部区域内两两节点间的斥力所产生的单位位移(一般为正值);
3. 计算每次迭代每条边的引力对两端节点所产生的单位位移(一般为负值);
4. 步骤 2、3 中的斥力和引力系数直接影响到最终态的理想效果,它与节点间的距离、节点在系统所在区域的平均单位区域均有关,需要开发人员在实践中不断调整;
5. 累加经过步骤 2、3 计算得到的所有节点的单位位移;
6. 迭代 n 次,直至达到理想效果。

算法简单实现

package jsnetworktopu;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Map;
import java.util.Set;

import net.sf.json.JSONArray;
public class Test {
    public static void main(String[] args) {
        JDBCGetData jd = new JDBCGetData();
        Map map = jd.queryDate();
        Set nodes= (Set)map.get("nodes");
        Set edges= (Set)map.get("edges");
        
        Spring sp = new Spring();
        List lNodes = new ArrayList(nodes);
        List lEdges = new ArrayList(edges);
        //1.set Node(x,y) , Random 随机分布初始节点位置
        //canvas size 1024*768
        double start_x, start_y, initSize = 40.0;
        for (Node node:lNodes) {
            start_x = 0 + 1024 * .5;
            start_y = 0 + 768 * .5;
            node.setX(start_x + initSize * (Math.random() - .5));
            node.setY(start_y + initSize * (Math.random() - .5));
        }
        
        
        List reSetNodes = sp.springLayout(lNodes,lEdges);
        //4.反复2,3步 迭代300次
        for(int i=0; i<300; i++){
            reSetNodes = sp.springLayout(reSetNodes,lEdges);
        }
    
        for(Node node:reSetNodes){
            System.out.println(node.getId()+" "+node.getX()+" "+node.getY());
        }
        
        JSONArray jo = JSONArray.fromObject(new HashSet(reSetNodes));
        System.out.println(jo);
    }
}

我们的2 和 3步在这

package jsnetworktopu;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class Spring {
    public List springLayout(List nodes,List edges) {
       //2计算每次迭代局部区域内两两节点间的斥力所产生的单位位移(一般为正值)
        int area = 1024 * 768;
        double k = Math.sqrt(area / (double)nodes.size());
        double  diffx, diffy, diff;
        
        Map dispx = new HashMap();
        Map dispy = new HashMap();
           
        int ejectfactor = 6;

        for (int v = 0; v < nodes.size(); v++) {
            dispx.put(nodes.get(v).getId(), 0.0);
            dispy.put(nodes.get(v).getId(), 0.0);
            for (int u = 0; u < nodes.size();  u++) {
                if (u != v) {
                    diffx = nodes.get(v).getX() - nodes.get(u).getX();
                    diffy = nodes.get(v).getY() - nodes.get(u).getY();

                    diff = Math.sqrt(diffx * diffx + diffy * diffy);
                 
                    if (diff < 30)
                        ejectfactor = 5;

                    if (diff > 0 && diff < 250) {
                        String id = nodes.get(v).getId();
                        dispx.put(id,dispx.get(id) + diffx / diff * k * k / diff * ejectfactor);
                        dispy.put(id,dispy.get(id) + diffy / diff * k * k / diff* ejectfactor);
                    }
                }
            }
        }     
        //3. 计算每次迭代每条边的引力对两端节点所产生的单位位移(一般为负值)     
        int condensefactor = 3;
        Node visnodeS = null, visnodeE = null;
        
        for (int e = 0; e < edges.size(); e++) {
            String eStartID = edges.get(e).getId1();
            String eEndID = edges.get(e).getId2();    
            visnodeS = getNodeById(nodes,eStartID);
            visnodeE = getNodeById(nodes,eEndID);

            diffx = visnodeS.getX() - visnodeE.getX();
            diffy = visnodeS.getY() - visnodeE.getY();
            diff = Math.sqrt(diffx * diffx + diffy * diffy);

            dispx.put(eStartID,dispx.get(eStartID) - diffx * diff / k * condensefactor);
            dispy.put(eStartID,dispy.get(eStartID) - diffy * diff / k* condensefactor);
            dispx.put(eEndID,dispx.get(eEndID) + diffx * diff / k * condensefactor);
            dispy.put(eEndID,dispy.get(eEndID) + diffy * diff / k * condensefactor);
        }
    
        //set x,y
        int maxt = 4 ,maxty = 3;
        for (int v = 0; v < nodes.size(); v++) {
            Node node = nodes.get(v);
            Double dx = dispx.get(node.getId());
            Double dy = dispy.get(node.getId());
            
            int disppx = (int) Math.floor(dx);
            int disppy = (int) Math.floor(dy);
            if (disppx < -maxt)
                disppx = -maxt;
            if (disppx > maxt)
                disppx = maxt;
            if (disppy < -maxty)
                disppy = -maxty;
            if (disppy > maxty)
                disppy = maxty;
            
            node.setX((node.getX()+disppx));
            node.setY((node.getY()+disppy));
        }   
        return nodes;
    }
    
    private Node getNodeById(List nodes,String id){
        for(Node node:nodes){
            if(node.getId().equals(id)){
                return node;
            }
        }
        return null;
    }
}

前端用CanvasXpress,因为它也支持设置 x y坐标方式布局。

效果显示(和参考资料中预期的一样):

迭代50次:

力导向算法简单实现 - zhenghaoju700 - zhenghaoju700 的博客

 

迭代100次:

力导向算法简单实现 - zhenghaoju700 - zhenghaoju700 的博客

迭代300次:

力导向算法简单实现 - zhenghaoju700 - zhenghaoju700 的博客

 

迭代500次:

力导向算法简单实现 - zhenghaoju700 - zhenghaoju700 的博客

当然算法实现上还存在一些问题,但是基本与资料上是一致的!!!

算法的实现 ,来自参考资料的CODE 很感谢 傅冬雷!!!

参考资料

http://www.ibm.com/developerworks/cn/web/0909_fudl_flashsocial/#major3

### 回答1: d3.js 是一个强大的 JavaScript 库,可以用于在网页中创建交互式图表和可视化。您可以使用 d3.js 来实现算法可视化网站。 下面是一个使用 d3.js 实现简单示例,显示了如何创建一个柱状图,其中柱状图的高度取决于数组中每个数字的大小: ``` <!DOCTYPE html> <html> <head> <script src="https://d3js.org/d3.v6.min.js"></script> <style> .bar { fill: steelblue; } </style> </head> <body> <svg width="960" height="500"></svg> <script> const data = [1, 2, 3, 4, 5]; const svg = d3.select("svg"); const bar = svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", (d, i) => i * 100) .attr("y", (d) => 500 - d * 20) .attr("width", 50) .attr("height", (d) => d * 20); </script> </body> </html> ``` 在这个示例中,我们首先加载了 d3.js 库,然后定义了一个数组 `data`,其中包含了五个数字。我们使用 d3.select() 选择了 `svg` 元素,然后使用 d3.selectAll() 和 data() 方法将数据绑定到柱状图。最后,我们使用 enter() 和 append() 方法将柱状图添加到 `svg` 元素中。 希望这对您有帮助! ### 回答2: d3.js是一种强大的JavaScript库,被广泛用于数据可视化。通过d3.js,我们可以使用HTML、CSS和SVG等技术,将数据转换成具有交互性和动画效果的可视化图表。 要实现算法可视化网站,首先需要选择一个算法作为示例。例如,我们可以选择排序算法中的“冒泡排序”。在网站中,我们可以用一个输入框来输入待排序的数组,并通过点击“排序”按钮来触发算法的执行。 对于冒泡排序的可视化,我们可以通过d3.js创建一个柱状图,每个柱子代表一个数组元素,柱子的高度代表元素的值。初始状态下,柱子按照输入数组的顺序排列,我们可以使用不同的颜色来区分已排序和未排序的元素。 在算法的每一次比较和交换过程中,我们可以通过改变柱子的高度和颜色来可视化操作的过程。比如,每次比较两个相邻的元素,如果需要交换位置,则柱子会发生动画效果,通过动画效果我们可以清楚地看到元素的移动过程。 在网站中,我们还可以加入一些交互功能,如暂停和继续按钮,可以在算法执行过程中暂停和重新播放。同时,我们还可以提供一些其他排序算法的选择,用户可以在网站中选择并查看不同算法的可视化过程。 总结来说,通过使用d3.js实现算法可视化网站,可以帮助用户更直观地理解算法的执行过程,并且更好地学习和理解各种排序算法。 ### 回答3: d3.js是一种广泛应用于数据可视化的JavaScript库,它能够帮助开发者以交互性的方式展示数据和算法。通过使用d3.js,我们可以轻松创建一个算法可视化网站,使用户能够直观地理解算法的工作原理。 一个示例是实现一个排序算法可视化网站。用户可以在网站上选择不同的排序算法,如冒泡排序、快速排序等。网站将展示该算法的工作过程和实时变化情况。 通过d3.js的导向布局功能,我们可以将排序算法的数据集可视化为一个图形。每个数据元素可以表示为一个节点,而其位置则根据其值大小进行排列。用户可以通过点击按钮,观察每个算法的迭代步骤,节点的移动情况以及数据元素的排序过程。 此外,我们还可以通过在网站上显示实时数据的方式,让用户更好地理解算法的执行过程。例如,在排序算法的可视化网站上,我们可以显示每个数据元素的当前位置和值,并实时更新这些数据。这样,用户可以直观地观察数据元素的交换和排序。 通过使用d3.js的过渡效果和交互功能,我们可以使算法可视化更为生动和易于理解。例如,在每次数据元素移动时,我们可以应用过渡效果,使节点平滑地从一个位置移动到另一个位置。用户还可以通过拖拽节点的方式,手动交换数据元素的位置,以更好地理解算法中的交换操作。 总之,利用d3.js,我们可以创建一个功能强大的算法可视化网站,帮助用户直观地了解各种算法的工作原理。这种网站可以提供大量的交互性和实时数据展示,使用户能够深入理解算法的执行过程。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值