<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. Java笔记（三）异常

    异常 一.概念 一)为什么会有Java异常机制 在没有Java异常机制的情况下,唯一的退出机制就是返回值,判断是否异常的方法就是 返回值.方法根据是否异常返回不同的返回值,调用者根据不同的返回值进行判 ...

  2. JVM笔记（二）JVM基本结构

    JVM基本结构 一.运行时内存区域 java虚拟机所管理的内存将会包括以下几个运行时内存区域. 1.程序计数器 Program Counter Register:可以看作当前线程(线程私有)所执行的字 ...

  3. 潭州课堂25班：Ph201805201 django 项目 第十一课 手机号是否存在，短信验证分析 (课堂笔记）

    判断手机号是否注册功能实现 1.分析 请求方法:GET url定义:/mobiles/(?P<mobile>1[3-9]\d{9})/ 请求参数:url路径参数 参数 类型 前端是否必须传 ...

  4. 学不动了，ECMAScript2018都来了

    原文:ECMAScript regular expressions are getting better! 作者: Mathias Bynens: Google V8引擎开发者 译者:Fundebug ...

  5. dd制作linux启动盘

    1.fdisk /dev/sdb 删除分区,新建分区 2.mkfs.vfat /dev/sdb1 3.dd bs=4M if=CentOS.iso of=/dev/sdb

  6. js将时间戳格式化为HH:ii:ss的格式

    将时间戳格式化为 HH:ii:ss的格式 <html> <head> </head> <body> <span id="time&quo ...

  7. Java 消除过期的对象引用

    内存泄漏的第一个常见来源是存在过期引用. import java.util.Arrays; import java.util.EmptyStackException; public class Sta ...

  8. Html表格：

    (1)<table>标签:声明一个表格,它的常用属性如下: -- border属性 定义表格的边框,设置值是数值 -- cellpadding属性 定义单元格内容与边框的距离,设置值是数值 ...

  9. sench touch 页面跳转

    下面是我做的一个简单的登录页面登录成功后跳转页面 首页要在app.js 里面添加 1.视图层   登录页面 Ext.define('MyApp.view.Login', { extend: 'Ext. ...

  10. pygame-KidsCanCode系列jumpy-part4-弹跳

    终于要到弹跳环节了,向上弹跳其实很简单,按下空格触发时,只要把y轴速度给一个向上的速度即可. Player类,新加一个jump()方法: def jump(self): self.vel.y = -2 ...