<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. .net3.5 支持tuple

    添加下面引用即可: https://github.com/SaladLab/NetLegacySupport

  2. php 压缩文件 zip

    <?php    class PHPZip    {        private $ctrl_dir     = array();        private $datasec      = ...

  3. 潭州课堂25班：Ph201805201 django 项目 第二十四课 文章主页 多级评论数据库设计 ，后台代码完成 (课堂笔记）

    加载新闻评论功能 1.分析 业务处理流程: 判断前端传的新闻id是否为空,是否为整数.是否不存在 请求方法:GET url定义:'/news/<int:news_id>' 请求参数:url ...

  4. [IOI2014]Wall

    [IOI2014]Wall 题目大意: 给你一个长度为\(n(n\le2\times10^6)\)的数列,初始全为\(0\).\(m(m\le5\times10^5)\)次操作,每次让区间\([l_i ...

  5. hibernate方法中参数传入数组的查询方法

    public List<T> getByIds(Long[] ids) { return getSession().createQuery(// "FROM User WHERE ...

  6. android Resources 类的使用

    使用 R.<resource_type>.<resource_name> 获取的是资源的一个 id (int 类型), 但有时候我们需要获取资源本身,这时候我们可以通过 Res ...

  7. 种花 [JZOJ4726] [可撤销贪心]

    Description 经过三十多个小时的长途跋涉,小Z和小D终于到了NOI现场——南山南中学.一进校园,小D就被花所吸引了(不要问我为什么),遍和一旁的种花园丁交(J)流(L)了起来. 他发现花的摆 ...

  8. 3ds max学习笔记（三）--视点显示控制

    显示模式:1.模型一般是以实体方式显示的,若想看线框方式,摁F3:返回实体,摁F3:2.实体加线框模式显示,摁F4:返回,摁F4:3.透明效果:ALT+X,透明显示,之后F4,显示线框:程序内的其他显 ...

  9. 弱智的grub消除法

    GRUB GNU GRUB(简称"GRUB")是一个来自GNU项目的启动引导程序.GRUB是多启动规范的实现,它允许用户可以在计算机内同时拥有多个操作系统,并在计算机启动时选择希望 ...

  10. Chrome_调试CSS

    1.我们都知道chrome浏览器打开开发者工具的Sources 栏可以查看css文件,并且可以实时修改样式,查看效果,但是这里修改的内容并不会保存到源文件中. 2.  以下方法可以使在chrome浏览 ...