<html>

  <head>

        <meta charset="utf-8">

        <title>力导向图</title>

        <style>

            .links line {

              stroke: #999;

              stroke-opacity: 0.6;

            }

            .nodes circle {

              stroke: #fff;

              stroke-width: 1.5px;

            }

            </style>

  </head> 

    <body>

        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

        <script>           

        var nodes = [

            { name: "虚拟助理APP",group:1    },

               { name: "桥梁结构",group:1    },

                  { name: "钢桁梁",group:1  },

                        { name: "上弦杆",group:1  },

                        { name: "下弦杆",group:1  },

                        { name: "桥面系",group:1  },

                        { name: "支座",group:1  },

                        { name: "声屏障",group:1  },

                        { name: "螺栓",group:1  },

                            { name: "螺栓病害",group:1  },

                                    { name: "折断",group:1  },

                                    { name: " 缺失",group:1  },

                                    { name: " 其他",group:1  },

                            { name: "螺栓养护",group:1  },

                                    { name: "涂装",group:1  },

                                    { name: "补拧",group:1  },

                                    { name: "除锈",group:1  },

                            { name: "螺栓维修",group:1  },

                                    { name: "更换",group:1  },

                                    { name: "补拧",group:1  },

                    { name: "斜拉桥",group:1  },

                    { name: "悬索桥",group:1  },

                    { name: "系杆拱",group:1  }

                 ];

        var edges = [

             { source : 0  , target: 1 } ,

               { source : 1  , target: 2 } ,

                { source : 2  , target: 3 },

                    { source : 2  , target: 4 },

                    { source : 2  , target: 5 },

                    { source : 2  , target: 6 },

                    { source : 2  , target: 7 },

                    { source : 2  , target: 8 },

                        { source : 8  , target: 9 },

                        { source : 9  , target: 10 },

                        { source : 9  , target: 11 },

                        { source : 9  , target: 12 },

                        { source : 8  , target: 13 },

                        { source : 13  , target: 14 },

                        { source : 13  , target: 15 },

                        { source : 13  , target: 16 },

                        { source : 8  , target: 17 },

                        { source : 17  , target: 18 },

                        { source : 17  , target: 19 },

                { source : 1  , target: 20 } ,

                { source : 1  , target: 21 } ,

                { source : 1  , target: 22 }

                ];    

        var width = 1000;

        var height =1000;

        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(-400);    //相互之间的作用力

        force.start();    //开始作用

        console.log(nodes);

        console.log(edges);

        //添加连线

        var svg_edges = svg.selectAll("line")

                            .data(edges)

                            .attr("class", "links")

                            .enter()

                            .append("line")

                            .style("stroke","#ccc")

                            .style("stroke-width",1);

        var color = d3.scale.category20();

        //添加节点

        var svg_nodes = svg.selectAll("circle")

                            .data(nodes)

                            .attr("class", "nodes")

                            .enter()

                            .append("circle")

                            .attr("r",20)

                            .style("fill",function(d,i){

                                return color(i);

                            })

                            .call(force.drag);    //使得节点能够拖动

        //添加描述节点的文字

        var svg_texts = svg.selectAll("text")

                            .data(nodes)

                            .enter()

                            .append("text")

                            .style("fill", "black")

                            .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; });

        });

        </script>  

    </body>

</html>

力导向图Demo的更多相关文章

  1. Vue和d3.js(v4)力导向图force结合使用，v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

  2. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  3. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

  4. d3.js（v5.7）力导向图（关系图谱）

    先上图,后面再一一解释: ok,为了方便理解,这里我就没有用之前封装的automatch函数来将数据和节点匹配了,如果你对enter(),exit()函数还不是很理解的话,请移步至我之前写的<n ...

  5. D3.js系列——布局：饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  6. 使用百度Echarts制作力导向图

    最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...

  7. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  8. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  9. D3.js 力导向图的拖拽（drag）与缩放（zoom）

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

随机推荐

  1. 前面的内容 也是要去掉白名单 和 8.8.8.8这种非问题IP的 高风险 么？ （目前我们没有获取客户的中风险、低风险数据，可以处理掉高风险）

    前面的内容 也是要去掉白名单  和 8.8.8.8这种非问题IP的 高风险 么?   (目前我们没有获取客户的中风险.低风险数据,可以处理掉高风险) == 整体把关.不清楚细节,所以只能从整体决策.做 ...

  2. 几个比较很重要的Shader相关教程

    1. 论坛上有个兄弟写个的ToonShaderModel,可以参考ShaderModelhttps://github.com/EpicGames/UnrealEngine/pull/1552/file ...

  3. BZOJ.3227.[SDOI2008]红黑树tree(树形DP 思路)

    BZOJ orz MilkyWay天天做sxt! 首先可以树形DP:\(f[i][j][0/1]\)表示\(i\)个点的子树中,黑高度为\(j\),根节点为红/黑节点的最小红节点数(最大同理). 转移 ...

  4. phpmyadmin#1045 无法登录 MySQL 服务器

    使用lnmp安装wordpress在登录phpmyadmin数据库的时候诡异的出现了   phpmyadmin#1045 无法登录 MySQL 服务器,解决方法如下: 1 修改root的密码—不可以行 ...

  5. BZOJ4970 : [ioi2004]empodia 障碍段

    通过两遍单调栈求出每个点作为最小值往右延伸到$g[i]$,作为最大值往左延伸到$f[i]$. 那么一个区间$[i,j]$可行当且仅当$g[i]\geq j$.$f[j]\leq i$且$i-a[i]= ...

  6. Alpha冲刺(4/10)——2019.4.27

    所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(4/10)--2019.4.27 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...

  7. JAVA的基本数据类型和类型转换

    一.数据类型 java是一种强类型语言,第一次申明变量必须说明数据类型,第一次变量赋值称为变量的初始化. java数据类型分为基本数据类型和引用数据类型 基本数据类型有4类8种 第一类(有4种)整型: ...

  8. 测试通过！为何线上还有很多BUG？实践中的质量控制

    质量控制 大多数测试人员认为测试工作是发现bug,虽然这是测试的主要任务,但其实测试最重要的任务是质量控制,而发现bug和验证bug只是质量控制的一个重要环节而已. 我想很多测试人员都经历过这样的场景 ...

  9. USE " cc.exports.* = value " INSTEAD OF SET GLOBAL VARIABLE"

    Cocos2d-x 3.5的lua项目生成后,变成了MVC模式,并且,加入了一个全局变量的检测功能.也就是说,你不小心用了全局变量,他会提示你出错! 比如 local temp = 1 temp = ...

  10. 1.3 java8新特性总结

    java8中重要的4个新特性: Lambda Stream Optional 日期时间API 接口方法(default和static方法,jdk9可定义private方法) 一.Lambda impo ...