精华内容
下载资源
问答
  • JSPlumb.js 绘制关系拓扑力导向布局算法简单实现) d3 echarts 都可以画关系拓扑(有环),但是总觉得不是自己想要的,改起来也很麻烦,所以可以用JSPlumb 自己绘制自己的关系拓扑,拓扑 = 绘图 + 自动...

    JSPlumb.js 绘制关系拓扑图(力导向布局算法简单实现)

    d3 echarts 都可以画关系拓扑图(有环),但是总觉得不是自己想要的,改起来也很麻烦,所以可以用JSPlumb 自己绘制自己的关系拓扑图,拓扑图 = 绘图 + 自动布局算法。jsplumb 可以实现绘自己的结点,而自动布局则可以采用 力导向布局算法。
    这里参考的是 https://www.jianshu.com/p/d3c64a39535a

    随机生成结点 与结点的位置

    	/**
     * A force directed graph layout implementation by liuchang on 2018/05/10.
     */
    	const CANVAS_WIDTH = 1000;
    	const CANVAS_HEIGHT = 1000;
    	let k;
    	let mNodeList = [];
    	let mEdgeList = [];
    	let mDxMap = {};
    	let mDyMap = {};
    	let mNodeMap = {};
    	var json ={} ;
    
    function ForceDirected() {
      //generate nodes and edges
      for (let i = 0; i < 20; i++) {
        mNodeList.push(new Node(i));
      }
    
      for (let i = 0; i < 20; i++) {
        let edgeCount = Math.random() * 8 + 1;
        for (let j = 0; j < edgeCount; j++) {
          let targetId = Math.floor(Math.random() * 20);
          let edge = new Edge(i, targetId);
          mEdgeList.push(edge);
        }
      }
      if (mNodeList && mEdgeList) {
        k = Math.sqrt(CANVAS_WIDTH * CANVAS_HEIGHT / mNodeList.length);
      }
      for (let i = 0; i < mNodeList.length; i++) {
        let node = mNodeList[i];
        if (node) {
          mNodeMap[node.id] = node;
        }
      }
    
      //随机生成坐标. Generate coordinates randomly.
      let initialX, initialY, initialSize = 40.0;
      for (let i in mNodeList) {
        initialX = CANVAS_WIDTH * .5;
        initialY = CANVAS_HEIGHT * .5;
        mNodeList[i].x = initialX + initialSize * (Math.random() - .5);
        mNodeList[i].y = initialY + initialSize * (Math.random() - .5);
      }
    
      //迭代200次. Iterate 200 times.
      for (let i = 0; i < 200; i++) {
        calculateRepulsive();
        calculateTraction();
        updateCoordinates();
      }
      
      json = JSON.stringify(new Result(mNodeList, mEdgeList));
      //console.log();
      
    }
    
    function Node(id = null) {
      this.id = id;
      this.x = 22;
      this.y = null;
    }
    function Edge(source = null, target = null) {
      this.source = source;
      this.target = target;
    }
    
    /**
     * 计算两个Node的斥力产生的单位位移。
     * Calculate the displacement generated by the repulsive force between two nodes.*
     */
    function calculateRepulsive() {
      let ejectFactor = 6;
      let distX, distY, dist;
      for (let i = 0; i < mNodeList.length; i++) {
        mDxMap[mNodeList[i].id] = 0.0;
        mDyMap[mNodeList[i].id] = 0.0;
        for (let j = 0; j < mNodeList.length; j++) {
          if (i !== j) {
            distX = mNodeList[i].x - mNodeList[j].x;
            distY = mNodeList[i].y - mNodeList[j].y;
            dist = Math.sqrt(distX * distX + distY * distY);
          }
          if (dist < 30) {
            ejectFactor = 5;
          }
          if (dist > 0 && dist < 250) {
            let id = mNodeList[i].id;
            mDxMap[id] = mDxMap[id] + distX / dist * k * k / dist * ejectFactor;
            mDyMap[id] = mDyMap[id] + distY / dist * k * k / dist * ejectFactor;
          }
        }
      }
    }
    
    /**
     * 计算Edge的引力对两端Node产生的引力。
     * Calculate the traction force generated by the edge acted on the two nodes of its two ends.
     */
    function calculateTraction() {
      let condenseFactor = 3;
      let startNode, endNode;
      for (let e = 0; e < mEdgeList.length; e++) {
        let eStartID = mEdgeList[e].source;
        let eEndID = mEdgeList[e].target;
        startNode = mNodeMap[eStartID];
        endNode = mNodeMap[eEndID];
        if (!startNode) {
          console.log("Cannot find start node id: " + eStartID + ", please check it out.");
          return;
        }
        if (!endNode) {
          console.log("Cannot find end node id: " + eEndID + ", please check it out.");
          return;
        }
        let distX, distY, dist;
        distX = startNode.x - endNode.x;
        distY = startNode.y - endNode.y;
        dist = Math.sqrt(distX * distX + distY * distY);
        mDxMap[eStartID] = mDxMap[eStartID] - distX * dist / k * condenseFactor;
        mDyMap[eStartID] = mDyMap[eStartID] - distY * dist / k * condenseFactor;
        mDxMap[eEndID] = mDxMap[eEndID] + distX * dist / k * condenseFactor;
        mDyMap[eEndID] = mDyMap[eEndID] + distY * dist / k * condenseFactor;
      }
    }
    
    /**
     * 更新坐标。
     * update the coordinates.
     */
    function updateCoordinates() {
      let maxt = 4, maxty = 3; //Additional coefficients.
      for (let v = 0; v < mNodeList.length; v++) {
        let node = mNodeList[v];
        let dx = Math.floor(mDxMap[node.id]);
        let dy = Math.floor(mDyMap[node.id]);
    
        if (dx < -maxt) dx = -maxt;
        if (dx > maxt) dx = maxt;
        if (dy < -maxty) dy = -maxty;
        if (dy > maxty) dy = maxty;
        node.x = node.x + dx >= CANVAS_WIDTH || node.x + dx <= 0 ? node.x - dx : node.x + dx;
        node.y = node.y + dy >= CANVAS_HEIGHT || node.y + dy <= 0 ? node.y - dy : node.y + dy;
      }
    }
    
    function Result(nodes = null, links = null) {
      this.nodes = nodes;
      this.links = links;
    }
    
    
    

    产生的json数据

    	{"nodes":[{"id":0,"x":253.0333390012338,"y":252.6177473512779},{"id":1,"x":385.40902721571337,"y":621.2774375590121},{"id":2,"x":785.7603499553587,"y":385.22055035590023},{"id":3,"x":405.77265246315744,"y":758.9663294857901},{"id":4,"x":387.42566167935115,"y":375.9496386440198},{"id":5,"x":636.2256279616934,"y":650.2703930201333},{"id":6,"x":903.5701082424029,"y":473.84409520512554},{"id":7,"x":629.0119557644166,"y":417.6638952006809},{"id":8,"x":823.6644385662,"y":707.0517481889663},{"id":9,"x":684.9305534356378,"y":343.37841641501205},{"id":10,"x":664.0325218669059,"y":738.3612618675652},{"id":11,"x":538.0046990344931,"y":416.53344738862125},{"id":12,"x":528.4011490009761,"y":646.4668782641444},{"id":13,"x":723.8174222062573,"y":495.39056742955427},{"id":14,"x":556.9332189690231,"y":297.1420909111563},{"id":15,"x":507.85974528045915,"y":536.5949966440751},{"id":16,"x":496.19506343566377,"y":196.06821865786628},{"id":17,"x":398.0298555427812,"y":486.6329335530637},{"id":18,"x":638.6390255996482,"y":526.7116765697044},{"id":19,"x":865.8762559421327,"y":567.6816928531405}],"links":[{"source":0,"target":14},{"source":0,"target":17},{"source":1,"target":2},{"source":1,"target":18},{"source":1,"target":1},{"source":2,"target":6},{"source":2,"target":11},{"source":2,"target":13},{"source":2,"target":11},{"source":2,"target":18},{"source":2,"target":9},{"source":3,"target":12},{"source":3,"target":1},{"source":3,"target":15},{"source":3,"target":10},{"source":3,"target":12},{"source":4,"target":9},{"source":4,"target":3},{"source":5,"target":9},{"source":5,"target":15},{"source":5,"target":13},{"source":5,"target":12},{"source":5,"target":12},{"source":5,"target":12},{"source":5,"target":13},{"source":5,"target":10},{"source":5,"target":7},{"source":6,"target":18},{"source":6,"target":2},{"source":6,"target":19},{"source":6,"target":8},{"source":6,"target":19},{"source":6,"target":2},{"source":6,"target":10},{"source":7,"target":6},{"source":7,"target":15},{"source":7,"target":7},{"source":7,"target":17},{"source":7,"target":19},{"source":8,"target":5},{"source":8,"target":10},{"source":8,"target":2},{"source":9,"target":13},{"source":9,"target":15},{"source":9,"target":12},{"source":9,"target":6},{"source":9,"target":14},{"source":10,"target":1},{"source":10,"target":13},{"source":10,"target":8},{"source":10,"target":9},{"source":11,"target":4},{"source":11,"target":11},{"source":11,"target":18},{"source":11,"target":7},{"source":11,"target":14},{"source":11,"target":7},{"source":11,"target":17},{"source":12,"target":5},{"source":12,"target":7},{"source":12,"target":14},{"source":12,"target":10},{"source":12,"target":11},{"source":12,"target":17},{"source":12,"target":8},{"source":12,"target":3},{"source":12,"target":14},{"source":13,"target":16},{"source":13,"target":4},{"source":13,"target":13},{"source":13,"target":8},{"source":13,"target":15},{"source":13,"target":18},{"source":13,"target":19},{"source":14,"target":9},{"source":14,"target":16},{"source":14,"target":16},{"source":15,"target":4},{"source":15,"target":7},{"source":15,"target":10},{"source":15,"target":1},{"source":15,"target":9},{"source":15,"target":11},{"source":16,"target":7},{"source":16,"target":18},{"source":16,"target":16},{"source":16,"target":14},{"source":16,"target":4},{"source":16,"target":0},{"source":16,"target":11},{"source":17,"target":15},{"source":17,"target":3},{"source":17,"target":13},{"source":17,"target":4},{"source":17,"target":12},{"source":17,"target":1},{"source":17,"target":5},{"source":17,"target":7},{"source":17,"target":14},{"source":18,"target":11},{"source":18,"target":2},{"source":18,"target":17},{"source":18,"target":11},{"source":18,"target":8},{"source":18,"target":7},{"source":18,"target":11},{"source":18,"target":7},{"source":19,"target":6},{"source":19,"target":14},{"source":19,"target":8},{"source":19,"target":11},{"source":19,"target":2},{"source":19,"target":19}]}
    

    获得结点坐标与结点父子关系后 绘制拓扑图

       		ForceDirected();
       		console.log(json);
       		json = JSON.parse(json);	 
       		//生成div
       		for(var i = 0; i<20 ; i++){
       	
       			var x = json["nodes"][i]["x"];
       			var y = json["nodes"][i]["y"];
       			var div = '<div class="group-container  database-trace-library lib" style="width:60px;height:60px;top:'+x+'px;left:'+y+'px;" id="database_'+i+'" group="databasegroup_'+i+'">'+
       			'<div  style="position: relative">'+
       				'<span class="database-library-tit"><img src="../../assets/images/analyze_images/analyze_database.png" alt="">'+i+'</span>'+
       				'<div style="position: absolute;top:0;left:0;height: 20px;width:20px" id="service_'+i+'"></div>'+
       				'</div></div>';
       			
       			$("#canvas").append(div);
       			var next = i + 1;
       			add2Group("database_"+i,"databasegroup_"+i,"service_"+i,j);
       		}
       		
       		$.each(json["links"],function(index,link){
       			
       			var sourceId = link["source"];
       			var target = link["target"];
       			
       			connectA2B(document.querySelector("#database_"+sourceId),document.querySelector("#service_"+target),j );
       		
       		});
       		function connectA2B(a,b,j){
       
       	     // connect some before configuring group
               j.connect({
                   source: a,
                   target: b,
                   anchors:["Right","Left"],
                   endpoint: ["Dot", {radius: 1}],
                   overlays: [
                       ["Arrow",
                           {   width: 5,
                               length:5,
                               location: 1,
                               id: "arrow"
                           }
                       ]
                   ],
                   paintStyle : { strokeWidth : 1, stroke : "#456" }//连线样式
    
               });
       	
       }
       
       function add2Group( groupId,groupName,divId,j){
       
       		j.addGroup({
                   el: document.querySelector("#"+groupId),
                   id: groupName,
                   dropOverride: true,
                   endpoint: ["Dot", {radius: 3}]
    //                droppable:false
               });  //(the default is to revert)
       	
               j.addToGroup(groupName,document.querySelector("#"+divId));
    
       	
       }
    

    最终效果图

    20个结点两百次迭代的效果图,没想到离开了学校还是要和物理打交道,万物皆可做模型。
    在这里插入图片描述

    展开全文
  • 描述本文简要介绍力导向算法的原理,提供了源码和D3绘制的实验结果。Force-Directed Layout algorithms are graph drawing algorithms based only on information contained within the structure of the graph ...

    描述

    本文简要介绍力导向算法的原理,提供了源码和D3绘制的实验结果图。

    Force-Directed Layout algorithms are graph drawing algorithms based only on information contained within the structure of the graph itself rather than relying on contextual information.

    力导向布局算法是一类绘图算法,它仅仅基于图的解构本身来绘图,而不依赖于上下文信息。

    力导向绘图 (Force-directed graph drawing)可以用于描述关系图的结点之间的关系,把结点分布到画布上合理的位置,比如描述企业之间的关系,社交网络中的人际关系等。

    原理

    斥力(Repulsive Force)

    把每个节点看做一个电荷,电荷与电荷之间存在斥力,也就是库仑力,根据库仑定律( Coulomb's law),电子之间的斥力可以这么计算:

    d3c64a39535a

    Coulomb's law

    假设每个电子的电量都是1,那就有:

    F = k/r2.

    常数k可以根据画布大小和电子数量计算。

    由于需要更新x,y坐标,可以分别计算斥力产生的正向位移。

    displacementX = distX / dist * k * k / dist * ejectFactor

    *关于计算x, y偏移和常数k的方式,可能并没有特别明确的方式,这里可能并不是最优的方法。

    引力(Traction Force)

    一些粒子之间被一些边所牵连,这些边产生类似弹簧的胡克引力:

    Fs=ks(x−x0)

    牵制着边两端的粒子。斥力和引力不断作用,粒子在不断位移之后趋于平衡,逐渐不再发生相对位移,能量不断消耗,最终趋于零。

    在引力和斥力地作用下不断地更新坐标,经过多次迭代达到一个稳定状态,收敛结束。参数和迭代次数需要调试。

    我分别用Java和JavaScript简单实现了这个算法,并且利用D3做图形化展示,下面是一些跑出来的数据呈现出的分布图:

    用Java和JavaScript简单实现了这个算法,一些数据分布如下:

    d3c64a39535a

    Graph 1. Iteration simulation of 24 nodes.

    d3c64a39535a

    Graph 2. Randomly generated 20 nodes, each having 1~7 links.

    d3c64a39535a

    Graph 3. Simulation of 100 nodes, iterating for 200 times.

    代码

    展开全文
  • D3学习:力导向图布局

    千次阅读 2015-12-26 11:19:48
    今天一早上起来复习了会儿算法的NPC证明...力导向图,之前学过一个比较复杂的,那时候按照一个demo写完了累的本宝宝半死也没怎么理解其中内涵,这回再看,感觉好多了,还是得循序渐进啊~<!DOCTYPE html> <meta cha

    今天一早上起来复习了会儿算法的NPC证明,好烧脑,本宝宝现在都有点而力不从心了~
    到图书馆学D3,雷打不动,即使有考试也不放弃码代码~~
    力导向图,之前学过一个比较复杂的,那时候按照一个demo写完了累的本宝宝半死也没怎么理解其中内涵,这回再看,感觉好多了,还是得循序渐进啊~

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>力导向图</title>
            <script type="text/javascript" src="../d3/d3.min.js"></script>
        </head>
    
        <body>
            <script type="text/javascript">
            var nodes = [{name:"盘锦"},
                         {name:"北票"},
                         {name:"锦州"},
                         {name:"沈阳"},
                         {name:"大连"},
                         {name:"厦门"},
                         {name:"北京"}];
            var edges = [{source:0,target:1},
                         {source:0,target:2},
                         {source:0,target:3},
                         {source:1,target:4},
                         {source:1,target:5},
                         {source:1,target:6}];
            var width = 400,
                height = 400;
    
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);
    
            var force = d3.layout.force()
                          .nodes(nodes)
                          .links(edges)
                          .size([width,height])
                          .linkDistance(150)//指定连线长度
                          .charge([-300]);//指定相互之间的作用力
                          //负电荷数
            //上面的语句定义了力布局方式
            //并用力布局的方式使得原始数据变成了画力导向图
            //所需要的数据格式
    
            force.start();//开始作用力
    
            console.log(nodes);
            console.log(edges);
    
            //看控制台输出的数据,已经发生了变化
    
            var color = d3.scale.category20();
    
            //添加节点
            var svg_nodes = svg.selectAll("circle")
                               .data(nodes)
                               .enter()
                               .append("circle")
                               .attr("r", 20)
                               .attr("fill", function (d, i) {return color(i);})
                               .call(force.drag);
                               //call使得节点能够被拖拽
    
    
            //添加连线
            var svg_edges = svg.selectAll("line")
                               .data(edges)
                               .enter()
                               .append("line")
                               .attr("stroke","#ccc")
                               .attr("stroke-width",1);
            //添加文字
            var svg_texts = svg.selectAll("text")
                               .data(nodes)
                               .enter()
                               .append("text")
                               .attr("fill","orange")
                               .attr("dx", 20)
                               .attr("dy", 8)
                               .text(function (d) {return d.name;});
    
            //第一次敲到这儿的时候,我打开网页看了一下效果
            //本以为会有静态的图,结果是所有东西都聚在了左上角
            //想想可能是因为上面只是添加了一些元素
            //指定了一些相对位置以及确定的量
            //但是具体的元素坐标等还是没有说明
            //所以需要下面这一段代码
    
            force.on("tick", function () {
                svg_edges.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;});
    
                svg_nodes.attr("cx", function (d) {return d.x;})
                         .attr("cy", function (d) {return d.y;});
    
                svg_texts.attr("x", function (d) {return d.x;})
                         .attr("y", function (d) {return d.y;});
            })
    
            //tick:滴答滴答,鼠标触发事件
    
            </script>
        </body>
    </html>
    展开全文
  • 图数据可视化中最关键的技术是图布局算法,但是目前并没有高效的并行图布局算法,因此目前对于海量图数据的可视化是一个挑战性问题。针对这一问题,在力导向布局算法基础上,忽略弱关联顶点间的斥力计算,提出了k-...
  • 力导向算法

    2021-03-25 21:15:35
    力导向图 百科:力导向算法是指通过对每个节点的计算,算出引力和排斥力综合的合力,再由此...如果要用代码去实现简化后的力导向图布局,我们需要几个步骤。 设置点数据nodes, 链接数据links。 对点进行随机定位。

    力导向图

    百科:力导向算法是指通过对每个节点的计算,算出引力和排斥力综合的合力,再由此合力来移动节点的位置。

    力导向算法是根据自然界中电子直接互相作用的原理来实现的,自然界中。两个电子靠的太近会产生斥力,隔的太远会产生引力,这样保持一个平衡状态,最终达到维持物体的形态的目的,这里就涉及到了一个库仑定律。
    最新版本的d3js里面的力导向算法就用四叉树算法对其进行了优化。
    实现逻辑

    如果要用代码去实现简化后的力导向图的布局,我们需要几个步骤。

    1. 设置点数据nodes, 链接数据links。
    2. 对点进行随机定位。
    3. 渲染视图
    4. 执行力算法计算位置,渲染视图
      重复执行4操作N次,得到想要的力导向图形。在执行力算法的时候,这里我们把库伦公式简化成了一次函数,所以,要么减一个数,要么加一个数去改变点的坐标。理解起来就很容易了,当然,实际上我们应该加上电子作用力(库伦公式)和弹簧力(胡克定律),让力导向的效果更接近自然界的作用结果。

    基于力导向 (Force-directed) 的算法作为弹簧理论算法的一类典型,被广泛应用于描述社交网络等关系型信息图。它的原理其实非常易懂,我们可以把整张网络想象成一个虚拟的物理系统。系统中的每个节点都可以看成是一个带有一定能量的放电粒子,粒子与粒子之间存在某种库仑斥力,使它们两两相互排斥。同时,有些粒子间被一些“边”所牵连,这些 边产生类似弹簧的胡克引力,又紧紧牵制着“边”两端的粒子。在粒子间斥力和引力的不断作用下,粒子们从随机无序的初态不断发生位移,逐渐趋于平衡有序的终 态。同时整个物理系统的能量也在不断消耗,经过数次迭代后,粒子之间几乎不再发生相对位移,整个系统达到一种稳定平衡的状态,即能量趋于零。此刻,最终的 这幅理想的社交网络图也基本绘制完成。

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

    2019-05-03 20:48:34
    数据的可视化,核心在布局,而布局算法通常是按照一些特定的模型,将抽象数据进行具象展示,这一过程伴随大量的迭代计算,例如朴素的 FR 力导向算法其在计算斥力时的算法时间复杂度达到了 O(n 3 ),这在小规模数据...
  • 基于引导的点布局优化算法

    千次阅读 2019-04-02 20:58:52
    本章针对已有的经典力导向算法作出改进,提出了一种新型力引导的点布局算法,该算法也是属于经典力引导的点布局算法范畴。本章提出的力导向的点布局算法中的一个显著特征是使用计算起来更加简单的吸引力和排斥力,与...
  • 力导向算法是一个图布局算法。一般来说,力导向算法包含一下步骤:对网络型数据进行力学建模,通过一定的时间模拟,得到一个稳定的布局。 对适用于一般网状结构数据绘图的算法来说,力导向算法是一种常被应用的...
  • 当数据中没有节点位置信息,或者数据中的位置信息不满足需求时,需要借助一些布局算法对图进行布局。G6 提供了 9 种一般的布局和 4 种树的布局: 一般: Random Layout:随机布局; Force Layout:经典...
  • 前言 最近公司业务服务老出bug,各路大佬盯着链路图找问题找的头昏眼花。某天大佬丢了一张图过来“我们做一个资源拓扑图吧,方便大家找bug”。...其中力导向图(Force-Directed Graph)是 d3.js 提供的一种
  • 力导向算法 也称为弹簧算法,基于物理系统的引力斥力模型为上的node和edge布局,用于解决重叠问题。 应用: 网络、层级、气泡、蜂房、布匹 绘制过程: 数据(node/edge表示或网络)-->d3.layout.force...
  • 布局算法包括: 力导向 临时力导向 锥树 螺旋锥树 圆锥爆破(对圆锥树布局算法进行的改进) 可重新配置的磁盘树 默认算法 它从icosphere的每个顶点扫描3D图形,并通过计算质量指标来计算当前图形布局的最佳透视...
  • web端js特效(arbor.js)

    千次阅读 2013-04-10 13:39:21
    web端js特效 Arbor、Chroma.js、D3.js、Google Chart Tools等。 1.Arbor.js ...Arbor是一个免费的、可视化的图形库,基于矢量创建动态的连接。它为图形组织和屏幕刷新处理提供了一个高效的、力导向布局算法
  • 国外站点https://datavisualization.ch/为大家总结出了当前热用的43款可视化工具,包括Arbor、Chroma.js、D3.js、Google Chart ...它为图形组织和屏幕刷新处理提供了一个高效的、力导向布局算法。 2.CartoDB ...
  • 国外站点DATAVISUALIZATION.CH为大家总结出了当前热用的43款可视化工具,包括Arbor、Chroma.js、D3.js、Google Chart...它为图形组织和屏幕刷新处理提供了一个高效的、力导向布局算法。 2.CartoDB CartoDB是一...
  • 43款可视化工具

    2020-11-12 15:11:09
    它为图形组织和屏幕刷新处理提供了一个高效的、力导向布局算法。2.CartoDBCartoDB是一个地图Web Service,并提供非常丰富API,利用它可以轻松创建动态的、可视化的数据驱动地图。3.Chroma.js 
  • Web开发必备的43款可视化工具

    千次阅读 2013-01-16 08:58:01
    国外站点DATAVISUALIZATION.CH为大家总结出了当前热用的43款可视化工具,包括Arbor、Chroma.js、D3.js、Google Chart ...它为图形组织和屏幕刷新处理提供了一个高效的、力导向布局算法。 2.CartoDB CartoDB是一
  • jquery特效(arbor)

    千次阅读 2013-04-03 16:30:17
    Arbor.js是一个利用web workers和jQuery创建的数据图形...它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。这个框架并没有强制使用哪一种方法来绘制屏幕,你可以使用Canvas、SVG、甚至是HTML的位置元素。
  • 4 Gephi

    2020-09-01 08:52:49
    在基于力导向 (Force-directed) 的算法布局后,进行统计分析: 1由于我们节点本身大小与节点标签尺寸都是选择Rank中的度,所以由可以明显看出谁的度越大,说明在个中与其他点联系越大,作用越大(通过颜色可以...
  • 这是我的毕业设计,.git文件夹是git管理的代码仓库,可以直接删除,使用了基于力导向算法的javascript库springy进行绘图布局,代码丑陋,仅供参考,因为是在linux下完成的,windows下解压估计有乱码,这是字体和字符...
  • 2019数据运营思维导图

    2019-03-29 21:34:09
    以目标为导向,学会数据拆分 细分到极致 追踪思路 运营的问题,是追踪出来的,不是一次就看出来的 所有的数据都是靠积累和沉淀才能发现问题,单一的数字没有任何 意义,只能称为 “数值” 结合/拆分思路 追踪数据,...
  • 数据运营思维导图

    2018-04-26 14:24:22
    如果留存较好,但时长和次数均不高,则可能是因过于强调每日登录奖励,但持续的app内容用户家缺乏吸引所致 用户分析 用户规模 下载数量 新增用户 定义:每日注册并登录游戏的用户数量 ——解决问题 渠道...

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

力导向图布局算法