<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. [蓝点ZigBee] Zstack 之点亮OLED液晶 ZigBee/CC2530 视频资料

    这一小节主要演示如何在Zstack 下移植液晶驱动,我们选取了目前比较流行的OLED 作为移植目标. 移植关键点 1 修改 GPIO pin,                  2 如何将Zstack ...

  2. 快速学习MarkDown语法及MarkDown拓展语法

    使用Markdown编辑器写博客 前半部分为效果后半部分为markdown格式,推荐开起两个窗口对比阅读 Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数 ...

  3. PAT基础6-2

    6-2 多项式求值 (15 分) 本题要求实现一个函数,计算阶数为n,系数为a[0] ... a[n]的多项式f(x)=∑​i=0​n​​(a[i]×x​i​​) 在x点的值. 函数接口定义: dou ...

  4. Network Monitoring in Software-Defined Networking :A Review(综述)

    来源:IEEE SYSTEMS JOURNAL 发表时间:2018 类型:综述 主要内容:概述了SDN监控的发展,并从收集信息.预处理.传送信息.分析.和描述五个阶段进行解读,并比较了传统网络和SDN ...

  5. hdu3466 Proud Merchants（01背包）

    https://vjudge.net/problem/HDU-3466 一开始想到了是个排序后的背包,但是排序的策略一直没对. 两个物品1和2,当p1+q2>p2+q1 => q1-p1& ...

  6. 更改WebBrowser控件的用户代理

    我试图在Winforms应用程序中更改WebBrowser控件的UserAgent. 我已成功使用以下代码实现此目的: [DllImport("urlmon.dll", CharS ...

  7. Wordpress页面只显示一篇文章

  8. python测试开发django-52.xadmin添加自定义的javascript（get_media）

    前言 我想使用xadmin在列表页每一行元素添加一个按钮,当点击这个按钮的时候,能发个请求出去,后台执行相关功能.于是想到添加自定义的javascript脚本能实现. 在/stackoverflow上 ...

  9. python测试开发django-51.Ajax发送post请求登录案例

    前言 我想实现一个登录功能:登录的接口是另外一个地方提供,页面上点登录按钮的时候,先访问登录接口,根据接口返回json信息判断是否登录成功,登录成功页面跳转,登录不成功,在登录首页显示失败原因 登录页 ...

  10. SpringBoot无废话入门01：最简SpringBoot应用

    虽然本篇讲的是一个最简的SpringBoot应用,但是要说明的是:学习SpringBoot是有门槛的,这个门槛就是, 1:首先得有框架的基础,比如SSM: 2:MAVEN基础. 在学好上面两者的基础上 ...